如何获取ng-template(Angular 6)中的值？
在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
相关·内容
class="img" [style.backgroundImage]="'url('+item.url+')'"> </article>
浏览 12提问于2018-07-24得票数 1
回答已采纳
2回答
我有一个Nx回购的角度应用和Jest作为测试框架。该应用程序有一个使用库的组件。>Slide 2</ng-template> <ng-template swiperSlide>Slide 4</ng-template>
<ng-tem
浏览 31提问于2022-05-09得票数 6
2回答
much HTML </div></div>一个猜测是因为后面没有数据模型。在s中，可拖动的div由*ngFor从数组呈现在页面上。此外，还有一个绑定到它们<em
浏览 2提问于2019-01-10得票数 2
回答已采纳
<p>Player <span>X</span>'s turn</p> <ng-template #O> </ng-template>
</sec
浏览 7提问于2022-05-31得票数 -2
1回答
我使用ng-template将内容传递给子组件，但我希望从子组件中获取所选项目的特定值 我也有一个子组件，值从子组件发送到子组件，然后再发送到父组件。虽然我可以获得选定的值，但它为完整的ng-template呈现了相同的值 例如:如果我点击最后一个div，所有选择的值都变成"3“ ? 你可以有更好的想法在stackblitz下面查
浏览 23提问于2019-10-09得票数 0
使用结构指令，我如何获得该指令所在的(本地)元素？对于正常的指令，ElementRef会让它的nativeElement指向它-例如： selector: '[example}我尝试过使用ViewContainerRef、TemplateRef、@ContentChild、@ViewChild的各种组合--但似乎找不到输入元素本身……
浏览 0提问于2016-12-23得票数 21
但我似乎找不到任何对自定义HTML的支持。当我将任何html标记附加到要在toast中显示的消息中时，html标记也呈现在消息中。如果有人有解决方案，请告诉我。
浏览 1提问于2018-10-24得票数 1
标题可能看起来很奇怪，但我所说的基本上就是正在做的事情。
我正在寻找一种在*ngFor作用域之外的<tr>中使用当前迭代的person的方法。在链接中，他使用ng-repeat-start和ng-repeat-end在ng-repeat.中包含多个标记，如何使用*ngFor实现与Angular2相同的行为
浏览 18提问于2016-08-31得票数 7
回答已采纳
基于ag-grid文档，enableRtl={true}将改变网格的样式。当我们永久地设置它时，它是正确的，但是当我想要以编程方式更改它时，它不会改变。这是我的代码 return ( className="ag-theme-balham" }} </div>
浏览 1提问于2020-01-14得票数 0
我已经开发了angular.js应用程序，并通过模板获取数据。所以我在jsRender中使用如下代码： <td>{{:StudentID}}</td><script type="text&
浏览 17提问于2016-08-14得票数 0
我的申请表里有注册表。在表单中，im使用两个标签，一个用于个人详细信息表单，另一个用于otp验证表单。填写完个人详细信息表单后，点击下一步，个人详细信息表单的值应通过api调用存储在数据库中，然后打开验证选项卡。在这种情况下，我不知道如何改变标签(动态口令验证表)时，下一步按钮点击。我对angular或angular 6是全新的，这是angular 6的应用。请帮
浏览 0提问于2018-11-15得票数 0
1回答
我正在尝试自定义当我单击一个标记时将出现的AgmSnazzyInfoWindow。在我的HTML文件中，我有以下代码， <ng-template>
<mat-card>{{ pLocation
浏览 1提问于2018-03-28得票数 1
MobileNo: ['', Validators.compose([Validators.required, Validators.pattern(/^\d{8}$/)])]
}); 我希望前缀是从表单发送的电话号值的一部分我想以多种形式使用手机号码字段，我认为单独的组件似乎有点过分了。 在保存/编辑时，有没有更好的方法在表单域中添加前缀，而不是附加/切片前缀值？
浏览 23提问于2020-07-04得票数 1
1回答
我通过这个文档在我的angular应用程序中使用swiper - https://swiperjs.com/angular 在我的styles.css中- @import '~swiper/swiper-bundle'; 我的html看起来像- <h1>Thumbs</h1>
<swiper [slidesPerView]="1" [spaceBetween]=&quo
浏览 18提问于2021-04-06得票数 0
在ng-bootstrap 中，有一些let-*属性的用法，这些属性似乎用于链接函数或事件以供以后使用。如果您查看示例顶部的(click)事件和let-c / let-d属性，就可以大致了解它的作用。这似乎是Angular的一个特性，与ng-bootstrap无关。这是我所指的一个例子。请看第一行。<ng-template</
浏览 0提问于2018-07-19得票数 14
回答已采纳
我使用ng引导来创建3个选项卡，每个选项卡在一个共同父组件中是一个单独的组件。每个子组件包含多个文本输入，当我在子组件之间切换时，输入文本值就会消失。如何在切换选项卡时保留所有输入值？
浏览 4提问于2018-01-11得票数 2
回答已采纳
我正在使用Angular Bootstrap创建一个日期范围选择器，尽管代码与示例中的代码完全相同，但我还是收到了几个错误，所有错误都表明"TypeError: Cannot read propertyng-bootstrap/ng-bootstrap执行此操作，则会在VSCode：node_modules/@ng-bootstrap/ng-bootstrap"' has no exported member中得到一个错误将它切换到上面的代码可以让错误消失...但
浏览 0提问于2019-01-03得票数 3
如果底层事件流没有发出新值，RxJS可观察对象如何发出新值？给定一个使用异步pipe来显示用户名的Angular组件； export class MyComponent implements OnInit {
} <ng-container *ngIf="user$ | async as user; else empty"></ng-container>
<ng-
浏览 32提问于2020-01-22得票数 1
回答已采纳
我正在使用angular 7中的CDKStepper创建自定义步进器，<cdk-step> <p>This is any content of "Step 1"</p>在stepper模板中</e
浏览 2提问于2019-04-22得票数 2
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
