获取 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>

在本节末尾，我有一个按钮列表，这些按钮必须操作上面的组件，因此我需要访问数据表。问题如下：在我的 Dart 代码中，页面中没有任何 data-table 的实例。 怎么可能得到它？我尝试使用 [(ngModel)] 标签，但我觉得我迷路了。

Answer 1

您要使用的是ViewChild注解。

你有2种可能

将组件class用作select或

@ViewChild(SkawaDataTableComponent)
SkawaDataTableComponent table;

在您的组件上添加引用

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

@ViewChild('myDataTable')
SkawaDataTableComponent table;

如果您多次使用相同的组件，但您想要 select 一个特定的组件，则第二个很好。

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

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

<button (click)="myDataTable.doSomething()">