Question

为我提供了一个具有以下定义的组件类：

@component({
    selector: 'app-table',
    template: '<div #content></div>',
    styleUrls: ['./table.component.css']
});

export class TableComponent implements OnInit{
    @ViewChild('content') elm: ElementRef;
    ....
}

但是，在父html中，结构为：

<div label="summary1">
   <app-table type="thisMonth"></app-table>
</div>
<div label="summary2">
   <app-table type="lastMonth"></app-table>
</div>

我的问题是，我该如何生成不同的内容并放入相应的“应用程序表”中？

我尝试使用以下方法，并且返回未定义：

export class TableComponent implements OnInit{
    @ViewChildren('content') elms: <QueryList>ElementRef;

谢谢！

Answer 1

正如@Akshay Rana在评论中提到的那样，您必须使用@Input装饰器来传递数据，他是绝对正确的。我将更详细地扩展他的答案。正如您所要求的那样，您需要生成不同的内容并放入相应的“ app-table”中，如果内容是HTML，则只有@Input装饰器将无法工作。因此，我共享一个URL，您可以在其中找到所有答案，包括使用@ Input，@ Output装饰器以及所有答案，请看一下，如果需要进一步说明，请告诉我。 How to get inner html of Angular6 component and add it to component template?

Angular 2组件-使用同一选择器多次出现

1 个答案: