扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
该指令用于基于已有的 TemplateRef 对象，插入对应的内嵌视图。在应用 NgTemplateOutlet 指令时，我们可以通过 [ngTemplateOutletContext] 属性来设置 EmbeddedViewRef 的上下文对象。绑定的上下文应该是一个对象，此外可通过 let 语法来声明绑定上下文对象属性名。
成都创新互联主营武昌网站建设的网络公司,主营网站建设方案,重庆App定制开发,武昌h5小程序开发搭建,武昌网站营销推广欢迎武昌等地区企业咨询
友情提示：若 let 语法未绑定任何属性名，则上下文对象中 $implicit 属性，对应的值将作为默认值。
NgTemplateOutlet 指令语法
NgTemplateOutlet 使用示例
@Component({
selector: 'ng-template-outlet-example',
template: `
Hello
Hello {{name}}!
Ahoj {{person}}!
`
})
class NgTemplateOutletExample {
myContext = {$implicit: 'World', localSk: 'Svet'};
}基础知识
TemplateRef
TemplateRef 实例用于表示模板对象。
ViewContainerRef
ViewContainerRef 实例提供了 createEmbeddedView() 方法，该方法接收 TemplateRef 对象作为参数，并将模板中的内容作为容器 (comment 元素) 的兄弟元素，插入到页面中。
* 语法糖的结构指令，最终都会转换为
若想进一步了解
NgTemplateOutlet 源码分析
NgTemplateOutlet 指令定义
@Directive({
selector: '[ngTemplateOutlet]'
})NgTemplateOutlet 类私有属性及构造函数
export class NgTemplateOutlet implements OnChanges {
// 表示创建的内嵌视图
private _viewRef: EmbeddedViewRef;
// 注入ViewContainerRef实例
constructor(private _viewContainerRef: ViewContainerRef) {}
} NgTemplateOutlet 类输入属性
@Input() public ngTemplateOutletContext: Object; // 用于设定EmbeddedViewRef上下文 @Input() public ngTemplateOutlet: TemplateRef; // 用于设定TemplateRef对象
NgTemplateOutlet 指令声明周期
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 是等价的。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持创新互联。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
微信二维码
移动版官网