获取在html中定义的Dart组件的实例

Question

在我的AngularDart应用中，我在page.html中定义了一个模板，这个模板中有趣的部分是

<skawa-data-table [data]="selectableRowData" [selectable]="true" [colorOddRows]="true">
<skawa-data-table-col [accessor]="nameAccessor"
header="Nome"
class="text-column"
[skipFooter]="true">
</skawa-data-table-col>
<skawa-data-table-col [accessor]="rankAccessor"
header="Rank"
[skipFooter]="true">
</skawa-data-table-col>
</skawa-data-table>

在本节的末尾，我有一个按钮列表，这些按钮必须操作上面的组件，因此我需要访问dataTable。问题如下:在我的Dart代码中，我没有页面中数据表的任何实例。怎么可能得到呢?我试图使用[(ngModel)]标签，但我认为我偏离了方向。

Answer 1

您要使用的是ViewChild注释

你有两种可能

使用组件类作为选择器

@ViewChild(SkawaDataTableComponent)
SkawaDataTableComponent table;

在组件上添加引用

<skawa-data-table #myDataTable>...</skawa-data-table>

@ViewChild('myDataTable')
SkawaDataTableComponent table;

如果您多次使用相同的组件，但您希望选择特定的组件，则第二个选项很好。

你也可以直接在你的模板中使用它，不需要ViewChild

<skawa-data-table #myDataTable>...</skawa-data-table>
<button (click)="myDataTable.doSomething()">