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

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

1 个答案: