Angular 将TemplateRef推入对象

目标：将对

ng模板的引用动态推送到对象中

挑战：

我正在为每个
ng模板
引用手动创建一个
@ViewChild

我不知道如何将每个
@ViewChild
推入我的
数据对象

//父TS组件
导出类型ITabData=object[]；
@组成部分({
选择器：“应用程序样式指南”，
templateUrl:'./style-guide.component.html'，
样式URL:['./style-guide.component.scss']
})
导出类StyleGuideComponent实现OnInit{
//这些是我正在引用的一些模板。但作为一点，我们可以有更多的模板。
@ViewChild（'orderDetails'）orderDetails:TemplateRef；
@ViewChild（'anotherTemp'）anotherTemp:TemplateRef；
//我要将所有ViewChild推送到的数据对象。
数据：ITabData=[]；
构造函数（）{
//我很确定这是不正确的，因为它不起作用
this.data.push（{tabLabel:'newlabel'，模板：this.orderDetails}）；
}
恩戈尼尼特（）{
//这就是我想要的数据对象。
//但我希望它以编程的方式填充。
//当我在ngOnInit中硬编码时，它会显示在我的视图中。但是obvs不好。
此参数。数据=[
{
tabLabel:“第一标签”，
模板：this.orderDetails
},
{
tabLabel:“第二标签”，
模板：this.anotherTemp
}
];
}
}

我希望
数据
对象动态填充一个新对象，如
{tabLabel:“我的新标签”，template:“我的新模板”

如果这是不可能的，建议将不胜感激

谢谢大家！你们就快到了

问题在于，您试图在页面中创建ViewChild引用之前，将其推入
构造函数（）
中的数组中，因此选择器还不能选择任何内容

相反，在中执行，就像手动操作一样，这确实有效

比如：

// Illustration only, you can delete empty constructors
constructor () {}

ngOnInit() {
  this.data.push({ tabLabel: 'newlabel', template: this.orderDetails });
}

一般的经验法则是：Angular中的
构造函数（）
基本上只用于将变量初始化为已知（静态）值或注入类引用（如服务）。您不能在构造函数中触摸DOM，因为在运行时模板尚未呈现。这就是生命周期挂钩的用途

顺便说一句：与其手动维护对象数组，也许会有用。
您就快到了

问题在于，您试图在页面中创建ViewChild引用之前，将其推入
构造函数（）
中的数组中，因此选择器还不能选择任何内容

相反，在中执行，就像手动操作一样，这确实有效

比如：

// Illustration only, you can delete empty constructors
constructor () {}

ngOnInit() {
  this.data.push({ tabLabel: 'newlabel', template: this.orderDetails });
}

一般的经验法则是：Angular中的
构造函数（）
基本上只用于将变量初始化为已知（静态）值或注入类引用（如服务）。您不能在构造函数中触摸DOM，因为在运行时模板尚未呈现。这就是生命周期挂钩的用途

作为旁注：与其手动维护该对象数组，不如使用它。
谢谢！是的，移动
this.data.push（{tabLabel:'newlabel'，template:this.orderDetails}）；
进入
ngOnInit
确实将新对象推入了
数据
数组中。但是有没有一种方法可以将新对象从
这个.data.push（）中手动写入
？@LailaAli否，因为该对象是需要这些特定字段的类型
，所以您需要声明它们。因此您正在推送该对象（这是一个）因此，如果我没有
类型
，或者没有将其作为
界面
，那么我仍然需要手动输入每个对象吗？因此，按照目前的情况，如果我有100个新选项卡和模板，我将不得不单独添加每个
对象
。@LailaAli是的，这就是我建议查看
ViewChildren的原因
（复数），它基于查询为您创建一个
elementref
数组。您可以使用该数组而不是
ITabData[]
。问题是架构首先需要有
数据
数组。这是为了什么？你真的有一个包含数百个选项卡的页面吗？很抱歉，我忽略了你最初评论中关于
@ViewChildren
的最后一行。我将阅读更多内容！我正在创建一个可重用的
选项卡组件
>。并且父级决定有多少个
选项卡
，以及哪些
模板
与哪些选项卡一起使用。谢谢！是的，移动
this.data.push（{tabLabel:'newlabel'，template:this.orderDetails}）；
进入
ngOnInit
确实将新对象推入了
数据
数组中。但是有没有一种方法可以将新对象从
这个.data.push（）中手动写入
？@LailaAli否，因为该对象是需要这些特定字段的类型
，所以您需要声明它们。因此您正在推送该对象（这是一个）因此，如果我没有
类型
，或者没有将其作为
界面
，那么我仍然需要手动输入每个对象吗？因此，按照目前的情况，如果我有100个新选项卡和模板，我将不得不单独添加每个
对象
。@LailaAli是的，这就是我建议查看
ViewChildren的原因
（复数），它基于查询为您创建一个
ElementRefs
数组。也许您可以使用该数组而不是
ITabData[]
。问题是架构首先需要有
数据
数组。它用于什么？您真的有一个包含数百个选项卡的页面吗？对不起，我很抱歉