ng6的ng-template的一个用法

最新推荐文章于 2021-11-22 16:02:20 发布

weixin_33910460

最新推荐文章于 2021-11-22 16:02:20 发布

阅读量4.3k

点赞数 1

文章标签： python javascript ViewUI

原文链接：https://my.oschina.net/u/1540190/blog/1840309

版权

2019独角兽企业重金招聘Python工程师标准>>>

组件模板：

<ng-template #tpl>

      <div>i am in tpl {{name }} </div>

</ng-template>

ts 组件内：

@ViewChild('tpl') tpl: TemplateRef<any>;

@ViewChild('tpl', {read: ViewContainerRef}) vc: ViewContainerRef;  // tpl 和 vc同时绑定到一个元素上（竟然可以)
  name = "123";
ngAfterViewInit() {

// 方法1 ：通过tpl自己创建一个view，把view的第一个node插入到注释节点之前

const embeddedView = this.tpl.createEmbeddedView( null ); //模板的name显示不出， 传入this也不行

const p = this.tpl.elementRef.nativeElement.parentNode as HTMLElement;

p.insertBefore(embeddedView.rootNodes[0], this.tpl.elementRef.nativeElement);

// 方法2 ： tpl 和 vc同时绑定到一个元素上（竟然可以）。 然后vc创建后tpl，直接插入到页面中

this.vc.createEmbeddedView(this.tpl);

}

以上两个方法都可以把tpl模板内容插入到组件中。

但第一种方法无法插入name的值。参数是context，不明白它的context是要传递什么进去

转载于:https://my.oschina.net/u/1540190/blog/1840309