05Angular结构型指令

ngFor

<ul class="title-con">
  <li *ngFor="let menu of menus;let odd = odd; let even = even">
    <a href="#">{{menu.title}}</a>
  </li>
</ul>

1. 变量的应用范围
2. 索引的获取
3. 第一个和最后一个（let menu of menus; let first = first; let last = last）
4. 奇和偶（下标的索引）

• 提升性能

（let menu of menus; trackBy:trackElement）接一个函数或者表达式，所以说，在经常变动的列表中通常都加上trackBy

trackElement(menus:Menus):string{
    return menus.id;
}

• 完整写法

<ul class="list">
    <ng-template ngFor [ngForOf]="hero" let-item let-i="index"
    let-len="count" let-ev="even" let-od="odd" let-f="first" let-l="last" [ngForTrackBy]="trackByHero">
    <li [class.even]="ev" [class.odd]="od">
    </li>
    </ng-template>
</ul>

• ng-template

是一个Angular元素，用来渲染HTML。它永远不会直接显示出来。事实上，在渲染视图之前，Angualar会把ng-template及其内容替换为一个注释，可以使用ng-If将其显示。

它不是一个指令、组件、类或接口，更像是JS中if块中的花括号

<ng-template [ngIf]="true">
    <!--不可见-->
    <p>Mid!</p>
</ng-template>

• ng-container

同样不会影响DOM结构，默认就是显示的，不需要配合结构型指令

<p>
    这是一行文字
    <ng-container *ngIf="false">我想在不增加标签的前提下，让这行文字不显示</ng-container>
    这是一行文字
</p>

ngIf

<div *ngIf="条件表达式">
在条件为真的时候需要显示的内容
</div>

• 使用别名

<p *ngIf="show as s">test -- {{s}}</p>

• 上面的完整写法

<ng-template [ngIf]="show" let-s>
    <p>test ngIf alias -- {{s}}</p>
</ng-template>

• 配合else使用

<div *ngIf="条件表达式" else elseContent>
在条件为真的时候需要显示的内容
</div>
<ng-template #elseContent>
在条件为假时显示的内容
</ng-template>
//这里的ng-template就是一段内置的模板，可以放html或自己的组件

• 其实*ngIf就是一个语法糖，把它拆解一下

<button (click)="show=!show">显示/隐藏</button>
<ng-template [ngIf]="show" [ngIfElse]="elseShow">
    <p>
      拆解*ngIf
    </p>
</ng-template>
<ng-template #elseShow>
    <p>
      ngIf为假时显示
    </p>
</ng-template>

还可以解锁更多没啥用的语法：ngIfthen

ngSwitch

• 常规写法

<div class="conent" [ngSwitch]="fruit">
    <p *ngSwitchCase="'apple'">苹果</p>
    <p *ngSwitchCase="'pear'">梨</p>
    <p *ngSwitchCase="'grape'">葡萄</p>
    <p *ngSwitchDefault>啥都不是</p>
</div>

• 展开写法

<div class="conent" [ngSwitch]="fruit">
    <ng-template ngSwitchCase="apple">
        <p>苹果</p>
    </ng-template>
    <ng-template *ngSwitchCase="'pear'">
        <p>梨</p>
    </ng-template>
    <ng-template *ngSwitchCase="'grape'">
        <p>葡萄</p> 
    </ng-template>
    <ng-template *ngSwitchDefault>
        <p>啥都不是</p>
    </ng-template>
</div>

自定义结构型指令

• 创建自定义指令

ng g d directives/unless 

• 创建一个内嵌的视图，并把这个视图插入到一个视图容器中

• 使用TemplateRef取得<ng-template>的内容，并通过ViewContainerRef来访问这个视图容器

• 简单地实现一个ngIf指令

export class UnlessContet<T = unkown>{
    $implicit: T = null;
    appUnless: T = null;
    attr: T = null;
}
@Directive({
    selector:'[appUnless]'
})
export class UnlessDirective{
    private hasView = false;
    private context = new UnlessContext();
    @Input()
    set appUnless(condition:boolean){
        this.context.$implicit = this.context.appUnless = condition;
        this.context.attr = 'aaaa';
        if(!condition && !this.hasView){
            this.viewContainer.createEmbeddedView(this.tempateRef,this.context);
            this.hasView = true;
        }else if(condition && this.hasView){
            this.viewContainer.clear();
            this.hasView = false;
        }
    }
    constructor(private templateRef:TemplateRef<any>,private viewContainer:ViewContainerRef){
        console.log('appUnless')
    }
}

• html

<button class="btn btn-primary" (click)="showUnless = !showUnless">
    toggle unless
</button>
<p *appUnless="showUnless"> 测试unless directive --{{showUnless}} </p>
<p *appUnless="showUnless as un">测试unless directive --{{un}}</p>
<p *appUnless="showUnless;let un;let attr=attr;">测试unless directive --{{un}}attr{{attr}}</p>

加了星号之后，构造函数内部的templateRef会去自动创建一个ng-template

• 展开写法

<ng-template [appUnless]="showUnless" let-at="attr" let-un>
    <p>测试unless directive --{{un}} attr {{at}}</p>
</ng-template>