美文网首页
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

    该指令用于基于已有的 TemplateRef 对象,插入对应的内嵌视图。在应用 NgTemplateOutlet ...

  • AngularJs1.x 和 Vue2.x

    前言:这是很久之前(大概2017年)写的文档,Angular已经更新到4.x版本,此文章关于Angular部分已经...

  • Angular 4 Reactive Forms

    Angular 4.x 中有两种表单: Template-Driven Forms - 模板驱动式表单 (类似于...

  • Angular 4 Template-Driven Forms

    Angular 4.x 中有两种表单: Template-Driven Forms - 模板驱动式表单 (类似于...

  • Angular目录

    NgIf NgForOf NgTemplateOutlet ElementRef

  • Angular之ngModel使用

    在 Angular 4.x 中对于使用 Template-Driven 表单场景,如果需要实现表单数据绑定。我们就...

  • Angular 4 ngModel 双向绑定原理揭秘

    在 Angular 4.x 中对于使用 Template-Driven 表单场景,如果需要实现表单数据绑定。我们就...

  • Angular 4.x 初识

    Angular核心:组件 Angular新特性: Q1:命令行工具:AngularCLI + 生...

  • Angular 4.x NgIf

    ngIf 指令用于根据表达式的值,在指定位置渲染 then 或 else 模板的内容。 then 模板除非绑定到不...

  • Angular 4.x NgForOf

    该指令用于基于可迭代对象中的每一项创建相应的模板。每个实例化模板的上下文对象继承于外部的上下文对象,其值与可迭代对...

网友评论

      本文标题:Angular 4.x NgTemplateOutlet

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