Angular-编写结构型指令和属性型指令

1、属性型指令：会改变DOM元素或Angular组件的行为和外观，如颜色、字体粗细等

    a、书写方式：@Directive({selector: ‘[attrDirective]’}) export class MyDirective{}

    b、访问指令的宿主DOM元素：可以通过在指令类的constructor构造函数参数中注入ElementRef依赖服务，该服务的nativeElement属性可以访问指令的宿主DOM元素

    c、对宿主元素添加监听事件：可以通过引入HostListener装饰器，添加监听事件，如：

        @HostListener(‘click’) callBack(evt) {}

    d、外部动态传入值：通过引入Input装饰器，声明输入属性，如：

        》在没有定义输入属性时：页面使用：<div attrDirective></div>

        》声明的输入属性跟指令名称相同时：@Input() attrDirective: string;    页面使用：<div [attrDirective]=“传入字符串”></div>

        》声明其他的输入属性：@Input() otherAttr: string; 页面使用：<div [attrDirective]=“传入字符串” otherAttr=“传入的其他字符串”></div>

 

2、结构型指令：会改变DOM结构，如：删除添加元素等，它会通过angular生成的<ng-template>模版使用ViewContainerRef服务的createEmbeddedView方法创建一个嵌入的视图，放置在紧跟宿主元素之后的视图容器中（即通过ViewContainerRef依赖服务注入获得的视图容器）

a、结构型指令的创建：@Directive({selector:’[structuralDirective]’}) export class StructuralDirective {}

b、获取指令模版内容：通过在构造函数参数中注入TemplateRef依赖服务能够取得该指令的模版内容

c、获取视图容器并创建可嵌入的视图：通过在构造函数中注入ViewContainerRef依赖服务，能够获取对应的视图容器，通过该服务的createEmbeddedView()方法创建一个可嵌入的视图，并可以调用remove()或者indsert()方法随时插入到视图容器中

d、结构型指令中*的简写的完整版：

    如：*ngFor结构型指令对应的完整版写法：

       简写： <div *ngFor=“let item of list; let i = index; let odd = odd; tarckBy=tarckById” [class]=“item.class"></div>

       完整版： <ng-template ngFor let-item [ngForOf]=“list” let-i=“index” let-odd=“odd” [ngForTrackBy]=“trackById”>

            <div [class]=“item.class”></div>

        </ng-template>

    注意：完整版下let声明的变量会由let i 变为let-i，对于像of、trackBy这样的指令特性会加上前缀ngFor，而其他的属性则会仍保留在宿主元素上

e、ng-template：使用<ng-template></ng-template>创建的元素在不添加任何指令的情况下，是不可见的，即浏览器不会去渲染这段模版

f、模版守卫：

    》通过在指令类中添加静态属性ngTemplateGuard_xx（其中xx即为@Input() 定义的属性名称），可以为模版中的输入表达式获得更精准的类型判断

    》通过在指令类中添加静态属性ngTemplateContextGuard，来声明模版上下文的类型

 

3、使用ngNonBindable指令禁止angular对表达式求值

答：

    a、使用时将其添加到宿主元素上，ngNonBindable会对宿主元素的子内容停用插值表达式、指令、绑定，会将其以原模样渲染展示，如：{{1+1}}，如果设置了ngNonBindable在视图渲染时，将不会解析此表达式，直接输出页面展示{{1+1}}，

    b、ngNonBindable只会对宿主元素的子内容起作用，而对于宿主元素上的插值、指令、绑定无效，如属性绑定、事件绑定

 

4、禁用类型检查的方式（angular中的strictTemplates\TypeScript中的strictNullChecks）

答：

    a、将strictTemplates配置属性设置为false，即全局禁用严格类型检查模式，使用基本模式，不尽兴严格的类型检查

    b、针对特定表达式的空值类型检查：

        》使用类型转换伪函数：$any()，将要禁用类型检查的表达式放入方法中，将表达式的值类型强制转换为any

        》可以在模版对应的绑定表达式上使用非空断言运算符!，放置于表达式尾部禁用，或者使用strictNullInputType配置属性为false，禁用模版中的严格空值类型检查

    c、

    d