时间戳

首页 > 解决方案 > 获取在 html 中定义的 Dart 组件的实例

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

问题描述

在我的 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)]标签，但我认为我走错了方向。

标签： angulardartangular-dart

解决方案

您要使用的是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()">

推荐阅读