Angular6创建模板并将模板从父组件传递给子组件

Question

我对angular很新，我正在尝试创建一个自定义表组件，以便在整个应用程序中重用。我有一个简单的例子，通过传递数据数组，然后传递一组Column配置。

我的Column配置看起来像

export interface Column {
  field: string;  
  displayValue?: string;
  cellTemplate?;
}

然后在我的TableComponent中，我根据传入的数据和列数组构建表。

但是现在我想尝试使它更先进，并且能够传递cellTemplate，就像这样

{
field: 'firstName',
displayValue: 'First Name',
cellTemplate: '<h1>My Name is {{cell}}</h1>
}

然后甚至更进一步，能够从父母传递一个onclick事件......

{
field: 'firstName',
displayValue: 'First Name',
cellTemplate: '<button (click)="parentClick(cell)">Click Me to find out my name</button>'
}
...
parentClick(cell){
alert('My Name is ' + cell);
}
...

但我有点卡住了。我发现我可以传递像<h1>Hello World</h1>这样的静态模板，然后使用[innerHtml] =“cellTemplate”但是到目前为止我只能弄清楚

Answer 1

如果要使用表达式或值更改模板内容，可以使用@Input将任何值从父组件传递到子组件。但是如果你想传递静态模板，你可以使用内容投影。请按照此链接如何使用内容投影。 https://www.infragistics.com/community/blogs/b/infragistics/posts/simplifying-content-projection-in-angular