如何在Angular 6+；中将子组件模板转换为其父组件模板；？

回到AngularJS，我创建了一个简单的智能表组件，可以像这样用于我们的团队：

{{row.firstname}{{row.lastname}}
{{vm.getAge（row.生日）}

这是一个人为的例子，但它是这样工作的。它生成了带有标题的表，并使用

标记的内部内容作为每个单元格（

元素）的模板

现在，我尝试将其移植到Angular（6+）。到目前为止，使用

@ContentChildren

我能够轻松地提取列列表

从'@angular/core'导入{Component，OnInit，Input，ContentChildren，QueryList}；
@组成部分({
选择器：'应用程序根'，
模板：`
但是我的问题是，要么你有一组静态的模板，要么你把它们插入到静态的地方。
在我的例子中，我需要在运行时在
*ngFor
中使用该模板。

在AngularJS中，我使用了以下代码：

函数编译（远程通讯）{
const columnElements=tElement.find（'column'）；
const columns=columnElements.toArray（）
.map（cEl=>({
字段：cEl.attributes.field.value，
标题：cEl.attributes.header.value，
}));
const template=angular.element（require（'./smart table.directive.html'）；
tElement.append（模板）；
//这里的核心功能是生成元素并设置它们的
//内容到“智能列”元素的确切内容。
//在链接阶段，我们实际上编译了导致这些元素的整个模板
//在ng repeat的范围内进行编译。
const tr=template.find（'tr[ng repeat start]”）；
columnElements.toArray（）
.forEach（cEl=>{
常数td=角度元素（“”）
.html（cEl.innerHTML）；
tr.append（td）；
});
const compile=$compile（模板）；
//评出原件
columnElements.wrap（函数（）{
返回``；
});
返回函数smartTableLink（$scope）{
$scope.vm.columns=列；
汇编（$范围）；
};
}
在Angular中，内容投影和模板实例化是分开的。也就是说，内容投影投影投影现有节点，您将需要一个可根据需要创建节点

也就是说，
列
需要成为一个结构指令，它将其模板传递给父级
智能表
，然后可以根据需要经常将其添加到其
视图容器
。
多亏了Meriton的指针，我的结论如下

正如他所建议的，我将我的
app列
组件改为一个指令。该指令必须出现在
ng模板
元素上：

@指令({
选择器：“ng模板[应用程序列]”，
})
导出类列指令{
@输入（）标题：字符串；
@ContentChild（TemplateRef）模板：TemplateRef；
}

app table
组件变为：

@组件({
选择器：“应用程序表”，
模板：`
{{column.title}}
`,
})
导出类TableComponent{
@输入（）数据：任意[]；
@ContentChildren（ColumnDirective）列：QueryList；
}

起初，我有点不喜欢将
ng模板
暴露给我的一些队友（还不是很了解角度的团队…），但最终我喜欢这种方法有几个原因。首先，代码仍然很容易阅读：


{{person.name}
{{个人生日}}

第二，因为我们必须指定上面模板上下文的变量名（即
let person
）代码，它允许我们保留业务上下文。因此，如果我们现在谈论动物而不是人（在不同的页面上），我们可以很容易地写：


{{animal.name}
{{动物生日}

最后，实现完全保留对父组件的访问。因此，假设我们添加一个从生日提取年份的
year（）
方法，在
app root
组件上，我们可以像这样使用它：


{{person.name}
{{年（人生日）}
谢谢。正是我想要的那种指导！我们将探索这条路线并跟进。