Angular ngTemplateOutlet

  虽然咱们能够经过使用 ViewContainerRef 将 ElementRef建立的视图插入指定的位置,可是仍然但愿有某中快捷的方式帮咱们实现。spa

  ngTemplateOutlet与ngComponentOutlet 就是帮咱们干这事的。code

ngTemplateOutlet对象

  插入 ng-template 建立的内嵌视图。
blog

   最简单的例子以下:ci

<div *ngTemplateOutlet="tpl1"></div>
<ng-template #tpl1>
  <span>I am span in template {{title}}</span>
</ng-template>

       

    按照官方文档,其语法知识以下: *ngTemplateOutlet = "templateRefExp; content: contentExp "文档

    templateRefExp:  ng-template 元素的#IDit

    contextExp:class

      一、可空参数; 语法

      二、能够在模版中使用 let-key 语句进行绑定; 这个key,是咱们在HTML模版绑定显示的key,即 {{key}} 。im

      三、使用 $implicit 这个key会把对应的值设置为默认值;

         由于咱们会为content指定一个对象,每一个对象可能有一个或多个值;

         若是这个对象,是一个值,则不需显示指定名称,如 student :  { name: 'jack' } ,能够用 student: { $implicit: 'jack' };

        在 ng-template 中也没必要使用 let-showName = "name", 只须要 let-showName 便可。 

          以下例子:


    HTML文件:
      <
ng-container *ngTemplateOutlet="tplStu; context: student"></ng-container>       <ng-template #tplStu let-name let-ageHTML="age">hello {{name}},your age is {{ageHTML}}</ng-template>     .ts文件 student = { $implicit: 'jack' , age: '19'};
相关文章
相关标签/搜索