该指令用于基于已有的 templateref 对象，插入对应的内嵌视图。在应用 ngtemplateoutlet 指令时，我们可以通过 [ngtemplateoutletcontext] 属性来设置 embeddedviewref 的上下文对象。绑定的上下文应该是一个对象，此外可通过 let 语法来声明绑定上下文对象属性名。
友情提示：若 let 语法未绑定任何属性名，则上下文对象中 $implicit 属性，对应的值将作为默认值。
ngtemplateoutlet 指令语法
ngtemplateoutlet 使用示例
我要评论
@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
templateref 实例用于表示模板对象。
viewcontainerref
viewcontainerref 实例提供了 createembeddedview() 方法，该方法接收 templateref 对象作为参数，并将模板中的内容作为容器 (comment 元素) 的兄弟元素，插入到页面中。
<ng-template>
<ng-template> 用于定义模板，使用 * 语法糖的结构指令，最终都会转换为 <ng-template> 模板指令，模板内的内容如果不进行处理，是不会在页面中显示。
<ng-container>
<ng-container> 是一个逻辑容器，可用于对节点进行分组，但不作为 dom 树中的节点，它将被渲染为 html中的 comment 元素，它可用于避免添加额外的元素来使用结构指令。
若想进一步了解 <ng-template> 与 <ng-container> 的区别，请参考angular 4.x 动态创建组件 文章中我有话说版块。
ngtemplateoutlet 源码分析
ngtemplateoutlet 指令定义
@directive({
selector: '[ngtemplateoutlet]'
})
ngtemplateoutlet 类私有属性及构造函数
export class ngtemplateoutlet implements onchanges {
// 表示创建的内嵌视图
private _viewref: embeddedviewref<any>;
// 注入viewcontainerref实例
constructor(private _viewcontainerref: viewcontainerref) {}
}
ngtemplateoutlet 类输入属性
@input() public ngtemplateoutletcontext: object; // 用于设定embeddedviewref上下文 @input() public ngtemplateoutlet: templateref<any>; // 用于设定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() 方法的内部实现，可以参考 文章中的相关内容。
另外需要注意的是使用 let 语法创建模板局部变量，若未设置绑定的值，则默认是上下文对象中 $implicit 属性对应的值。为什么属性名是 $implicit 呢？因为 angular 不知道用户会如何命名，所以定义了一个默认的属性名。 即 let-name="$implicit" 与 let-name 是等价的。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
如对本文有疑问， 点击进行留言回复！！
Angular5整合富文本编辑器TinyMCE的方法(汉化+上传)
基于Angular 8和Bootstrap 4实现动态主题切换的示例代码
解决三元运算符 报错“SyntaxError: can''t assign to conditional expression”
网友评论