在Angular 6中,可以通过ViewChild装饰器和模板引用变量来获取ng-template中的值。
首先,在ng-template标签上定义一个模板引用变量,例如:
<ng-template #myTemplate>
<p>This is a template</p>
</ng-template>
然后,在组件类中使用ViewChild装饰器来获取该模板引用变量的引用,例如:
import { Component, ViewChild, TemplateRef } from '@angular/core';
@Component({
selector: 'app-my-component',
template: `
<ng-container *ngTemplateOutlet="myTemplate"></ng-container>
`
})
export class MyComponent {
@ViewChild('myTemplate') myTemplate: TemplateRef<any>;
ngAfterViewInit() {
console.log(this.myTemplate);
}
}
在上述代码中,通过@ViewChild('myTemplate')装饰器将模板引用变量myTemplate与组件类中的myTemplate属性关联起来。然后,在ngAfterViewInit生命周期钩子中,可以通过this.myTemplate来访问ng-template中的内容。
需要注意的是,ngAfterViewInit生命周期钩子是在视图初始化完成后调用的,所以在该钩子中才能确保模板引用变量已经被正确地赋值。
推荐的腾讯云相关产品:腾讯云云服务器(CVM),产品介绍链接地址:https://cloud.tencent.com/product/cvm
“中小企业”在线学堂
云+社区开发者大会 长沙站
Elastic 中国开发者大会
云+社区技术沙龙[第6期]
腾讯云GAME-TECH沙龙
高校公开课
云+社区技术沙龙[第28期]
云+社区技术沙龙[第10期]
开箱吧腾讯云
领取专属 10元无门槛券
手把手带您无忧上云