该指令用于基于已有的 TemplateRef
对象,插入对应的内嵌视图。在应用 NgTemplateOutlet 指令时,咱们能够经过 [ngTemplateOutletContext]
属性来设置 EmbeddedViewRef
的上下文对象。绑定的上下文应该是一个对象,此外可经过 let
语法来声明绑定上下文对象属性名。typescript
友情提示:若 let 语法未绑定任何属性名,则上下文对象中
$implicit
属性,对应的值将做为默认值。segmentfault
<ng-container *ngTemplateOutlet="templateRefExp; context: contextExp"></ng-container>
@Component({ selector: 'ng-template-outlet-example', template: ` <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="localSk"><span>Ahoj {{person}}!</span></ng-template> ` }) class NgTemplateOutletExample { myContext = {$implicit: 'World', localSk: 'Svet'}; }
TemplateRef 实例用于表示模板对象。函数
ViewContainerRef 实例提供了 createEmbeddedView()
方法,该方法接收 TemplateRef
对象做为参数,并将模板中的内容做为容器 (comment 元素) 的兄弟元素,插入到页面中。源码分析
若想进一步了解 TemplateRef
和 ViewContainerRef
的相关内容,请参考如下文章:this
<ng-template>
<ng-template>
用于定义模板,使用 *
语法糖的结构指令,最终都会转换为 <ng-template>
模板指令,模板内的内容若是不进行处理,是不会在页面中显示。对象
<ng-container>
<ng-container>
是一个逻辑容器,可用于对节点进行分组,但不做为 DOM 树中的节点,它将被渲染为 HTML中的 comment
元素,它可用于避免添加额外的元素来使用结构指令。ip
若想进一步了解 <ng-template>
与 <ng-container>
的区别,请参考 Angular 4.x 动态建立组件 文章中我有话说版块。ci
@Directive({ selector: '[ngTemplateOutlet]' })
export class NgTemplateOutlet implements OnChanges { // 表示建立的内嵌视图 private _viewRef: EmbeddedViewRef<any>; // 注入ViewContainerRef实例 constructor(private _viewContainerRef: ViewContainerRef) {} }
@Input() public ngTemplateOutletContext: Object; // 用于设定EmbeddedViewRef上下文 @Input() public ngTemplateOutlet: TemplateRef<any>; // 用于设定TemplateRef对象
export class NgTemplateOutlet implements OnChanges { ngOnChanges(changes: SimpleChanges) { // 若this._viewRef已存在,则先从视图容器中对应的位置移除该视图。 if (this._viewRef) { this._viewContainerRef.remove(this._viewContainerRef.indexOf(this._viewRef)); } // 若this.ngTemplateOutlet输入属性有绑定TemplateRef对象,则基于设定的上下文对象建立内嵌视图 if (this.ngTemplateOutlet) { this._viewRef = this._viewContainerRef.createEmbeddedView( this.ngTemplateOutlet, this.ngTemplateOutletContext); } } }
ngTemplateOutlet
指令的源码相对比较简单,若是读者有兴趣了解 createEmbeddedView()
方法的内部实现,能够参考 Angular 4.x NgIf 文章中的相关内容。
另外须要注意的是使用 let
语法建立模板局部变量,若未设置绑定的值,则默认是上下文对象中 $implicit
属性对应的值。为何属性名是 $implicit
呢?由于 Angular 不知道用户会如何命名,因此定义了一个默认的属性名。 即 let-name="$implicit"
与 let-name
是等价的。