美文网首页
Angular 4.x NgTemplateOutlet

Angular 4.x NgTemplateOutlet

作者: h266094 | 来源:发表于2017-10-16 11:49 被阅读0次

    该指令用于基于已有的 TemplateRef 对象,插入对应的内嵌视图。在应用 NgTemplateOutlet 指令时,我们可以通过 [ngTemplateOutletContext] 属性来设置 EmbeddedViewRef 的上下文对象。绑定的上下文应该是一个对象,此外可通过 let 语法来声明绑定上下文对象属性名。

    友情提示:若 let 语法未绑定任何属性名,则上下文对象中 $implicit 属性,对应的值将作为默认值。

    NgTemplateOutlet 指令语法

    <ng-container 
          *ngTemplateOutlet="templateRefExp; context: contextExp">
    </ng-container>
    

    NgTemplateOutlet 使用示例

    app.component.ts

    export class AppComponent {
      myContext = {$implicit: 'World', localSk: 'Svet',k:"ksdklsdlksdlk"};
    }
    

    app.component.html

    <ng-container *ngTemplateOutlet="greet"></ng-container>
    <hr>
    <ng-container *ngTemplateOutlet="eng; context: myContext"></ng-container>
    <hr>
    <ng-container *ngTemplateOutlet="svk; context: myContext"></ng-container>
    <hr>
    
    <ng-template #greet><span>Hello</span></ng-template>
    <ng-template #eng let-name><span>Hello {{name}}!</span></ng-template>
    <ng-template #svk let-person="k"><span>Ahoj {{person}}!</span></ng-template>
    

    相关文章

      网友评论

          本文标题:Angular 4.x NgTemplateOutlet

          本文链接:https://www.haomeiwen.com/subject/mpdkuxtx.html