AngularDart中如何获取HTML模板内定义的Dart组件实例

实现步骤 #

• 第一步：修改模板代码，给skawa-data-table组件添加模板引用变量
  修改后的模板代码如下：

<skawa-data-table #dataTable [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组件类中通过@ViewChild注解查询获取实例
  首先确保你已经导入了Angular核心依赖和skawa表格对应的组件类：

import 'package:angular/angular.dart';
import 'package:skawa_components/table/table.dart';
// 其他必要导入

然后在你的页面组件类中声明对应的实例属性：

@Component(
  // 你的组件配置，比如selector、templateUrl等
)
class YourPageComponent implements AfterViewInit {
  // 通过模板引用的标识查询组件实例
  @ViewChild('dataTable')
  SkawaDataTableComponent dataTable;

  @override
  void ngAfterViewInit() {
    // 该生命周期钩子触发时，组件实例已经完成初始化，可以正常调用
    // 示例：调用表格实例的全选方法
    dataTable.selectAll();
  }

  // 你自己的按钮点击处理逻辑，直接调用dataTable的属性、方法即可
  void onBtnClick() {
    // 比如清空选中项
    dataTable.clearSelection();
  }
}

相关说明 #

你之前尝试用[(ngModel)]无法实现需求是正常的，该语法是为表单类控件设计的双向值绑定语法，仅适用于实现了ControlValueAccessor接口的组件，作用是同步组件的输入输出值，本身没有获取组件实例的能力，和你的需求场景不匹配。

如果你的表格是被*ngIf等结构性指令包裹、动态渲染的，可以改用@ViewChildren监听查询结果的变化，避免实例为null的问题。

内容的提问来源于stack exchange，提问作者Razlo3p