angular-片段与插槽

我们在使用vue时一定用到过slot，这个东西很好用，那angular是否也有类似的东东呢？
答案是肯定的，不过在讲这个之前，我们先来搞明白一个特殊标签。

ng-container

ng-container是angular的一个特殊标签，有点类似ng-template，但二者的用法不一样。
最大的不同之处在于，ng-template包裹的内容无法展示出来，而ng-container却可以：

<ul>
    <ng-container *ngFor="let item of listdata">
        <li>
            {{item.id}}---{{item.name}}
        </li>
    </ng-container>
</ul>

编译后发现，ng-container并创建任何节点，只是作为一个逻辑tag来使用。
有时为了代码清晰明了，我们并不希望将*ngFor的逻辑放在实际的模板标签上，这时ng-container就派上了用场。

模板片段ngTemplateOutlet

这个语法糖实现的是模板片段，跟slot有一点像。

具名片段

<ng-template #header>
    Hello, header!
</ng-template>
<ng-template #footer>
    Hello, footer!
</ng-template>

<div [ngTemplateOutlet]="header"></div>
<div [ngTemplateOutlet]="footer"></div>

作用域片段

作用域片段需要声明上下文，以便渲染代码片段的时候绑定相关字段。

<!--ng-container容器下嵌入代码片段，id是tplStu，上下文context是student-->
<ng-container *ngTemplateOutlet="tplStu; context: student">

</ng-container>


<ng-template #tplStu let-name let-ageHTML="age">


    hello {{name}},your age is {{ageHTML}}

</ng-template>

let-name这种写法有点奇怪，其实就是let name="xxx"的意思,如果后面不跟具体的值，就是代表默认值。
let-ageHTML = "age",翻译过来就是let ageHTML = "age"。
name和age两个字段，绑定的上下文context就是student，需要在ts文件声明，最终访问的是student.name和student.age。
ts文件：

student = { $implicit: 'jack' , age: '19'};//$implicit的英文愿意是含蓄的，引申为默认值的意思，本例对应的就是let-name

插槽ng-content

angular真正的插槽是ng-content，一般是用于组件之间的信息传递。

匿名插槽

father.component.html:

<app-child>
    
    <h2>这是一个匿名插槽</h2>
</app-child>

child.component.html:

<div style="background:yellow">
    <ng-content></ng-content>
</div>

匿名插槽很简单，利用ng-content这个特殊tag占个坑即可搞定。

具名插槽

ng-content可以加select关键字，就是具名插槽。
father.component.html:

<app-child>
    <div ngProjectAs="demo1">
        <h1>我是demo1</h1>
    </div>
    <div class="demo2">
        <h2 style="color:yellow;">class为"demo2"</h2>
    </div>
    <div name="demo3">
        <h3>name为"demo3"</h3>
    </div>
    <app-other></app-other>
</app-child>

这个具名插槽十分强大，子组件也能传递。
child.component.html:

<ng-content select="demo1"></ng-content>
<ng-content select=".demo2"></ng-content>
<ng-content select="[name=demo3]"></ng-content>
<!--子组件渲染-->
<ng-content select="app-other"></ng-content>

作用域插槽

要实现作用域插槽，还是得借助ngTemplateOutlet的力量，ng-content无法满足需求。
father.component.html:

<app-child [myslot]="slotTpl"></app-child>

<ng-template #slotTpl let-name let-ageHTML="age">


    hello {{name}},your age is {{ageHTML}}

</ng-template>

然后子组件需要接收信息，用@Input()装饰器可以搞定。
child.component.ts:

  @Input() myslot:any;//严格类型是TemplateRef<any>
  ...
  student = { $implicit: 'jack' , age: '19'};//定义上下文

然后在子组件模板中渲染出来即可。
child.component.html:

<ng-container *ngTemplateOutlet="myslot;context:student">

</ng-container>