ng6的ng-template的一个用法 原

组件模板:

<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是要传递什么进去

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Python小白进阶之旅

ConfigParser:Python中对于ini格式的配置文件的使用

文章链接: http://note.youdao.com/noteshare?id=dfec323b2c6509d7189453ec730b3870&sub=7...

2202
来自专栏运维技术迷

Redis全局命令

redis有5种数据结构,他们是键值对中的值,对于键来说有一些通用的命令。 查看所有键 语法:keys * [root@vultr ~]# redis-cli ...

3457
来自专栏c#开发者

[原创]PipelineTools 文件传输工具

功能模块只有 1/文件目录-〉文件目录 2/文件目录-〉MSMQ 3/MSMQ-〉MSMQ 4/MSMQ -〉文件目录 在传输MSMQ是文件不能超过4M 下载文...

3677
来自专栏ccylovehs

JDK动态代理与CGLib动态代理

JDK1.3以后java提供了动态代理技术,允许开发者在运行期创建接口的代理实例,动态代理是实现AOP的绝好底层技术。

3851
来自专栏Web项目聚集地

你真的懂「类的加载机制」吗?

高广超 :多年一线互联网研发与架构设计经验,擅长设计与落地高可用、高性能互联网架构。目前就职于美团网,负责核心业务研发工作。本文首发在 高广超的简书博客,欢迎点...

1803
来自专栏我是攻城师

关于线程可见性一个“诡异”的问题

如果执行上面的代码,大多人可能觉得会死循环,因为这里没有任何的同步策略,比如synchronized,Lock,atomic,volatile等关键字,也就是说...

953
来自专栏mathor

线程的基本概念

1354
来自专栏我的博客

php命名空间详解

1、命名空间概述 从广义上来说,命名空间是一种封装事物的方法。在很多地方都可以见到这种抽象概念。例如,在操作系统中目录用来将相关文件分组,对于目录中的文件来说,...

3298
来自专栏娱乐心理测试

vue 方法回调通知执行下一个方法

在项目中有很多这样的需求,在一个方法执行完成拿到数据后才可以执行下一个方法,这就需要在第一个方法执行完后有个回调函数通知下一个方法可以执行了。

2422
来自专栏Python小屋

列表元素循环移位中Python切片的妙用

之前有个文章中介绍了列表循环移位的3中方法,原文请见:Python序列循环移位的3种方法 其中第二种方法虽然更直接地翻译了题目的要求,但是显得还是有点啰嗦,如...

3364

扫码关注云+社区

领取腾讯云代金券