Получить экземпляр компонента Dart, определенного в html

#angular #dart #angular-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>
 

В конце этого раздела у меня есть список кнопок, которые должны управлять указанным выше компонентом, поэтому мне нужен доступ к данным. Проблема в следующем: в моем коде Dart у меня нет ни одного экземпляра таблицы данных на странице.
Как это возможно получить? Я пытался использовать [(ngModel)] tag, но, кажется, сбился с направления.

Ответ №1:

То, что вы хотите использовать, — это ViewChild аннотации.

У вас есть 2 возможности

Используйте класс компонента в качестве селектора

 @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()">