[JavaScript知识库]angular-片段与插槽

ng-template

ng-template是一个 Angular 元素，它永远不会直接显示出来。在渲染视图之前，Angular 会把及其内容替换为一个注释。

ng-template 是用来定义模板的，当使用ng-template定义好一个模板之后，可以用ng-container和templateOutlet指令来进行使用。

<ng-template #loading>
  <button (click)="login()">login</button>
  <button (click)="sigup()">sigup</button>
</ng-template>
<ng-container *ngTemplateOutlet="loading">

</ng-container>

<h6 class="kb-question" [ngClass]="{ 'long-shown': item.shortCut }"
      nz-tooltip [nzTooltipTitle]="titleTemplate" [innerHTML]="item.title | safeHtml"></h6>
      
 <ng-template #titleTemplate>
        <span class="kb-article-list-title" [innerHTML]="item.title | safeHtml"></span>
</ng-template>

TemplateRef

TemplateRef 实例用于表示模板对象，TemplateRef 抽象类的定义如下：

  abstract get elementRef(): ElementRef;
  abstract createEmbeddedView(context: C): EmbeddedViewRef<C>;
}

在指令中通过依赖注入TemplateRef可以直接拿到ng-tempalte的TemplateRef，但是在component组件中我们则需要使用viewChild

<ng-template #tptest>
  <span>template test</span>
</ng-template>

@ViewChild('tptest') tptest: TemplateRef<any>;

ng-container

g-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

<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。

// 父组件
<app-call-drawer>
    <ng-container class="callDetail">
                        <!-- 智能助手 -->
        <span class="showDetail" (click)="showHistoryAssistant()">点击查看</span>
    </ng-container>
</app-call-drawer>

// 子组件
<ng-container *ngTemplateOutlet="expandIconTpl; context: { moduleName: 'callDetail' }">
 </ng-container>

moduleName 是传参，callDetail是组件

// 子组件中的 template 
<ng-template #expandIconTpl let-moduleName="moduleName">
            <div class="expand-icon">
                拉拉我是买包的小行家
            </div>
</ng-template>

插槽ng-content

ather.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>