Angular6創建模板並將模板從父組件傳遞給子組件

Question

我對angular非常陌生，並且正在嘗試創建自定義表格組件以在整個應用程序中重用。 我有一個簡單的示例，先傳遞數據數組，然后傳遞Column配置數組。

我的Column配置看起來像

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

然后在我的TableComponent中，根據傳入的Columns的數據和數組構建表。

但是現在我想嘗試使其更高級，並能夠傳遞cellTemplate，例如

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

然后走得更遠，並能夠傳遞父級的onlclick事件...

{
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