获取组件实例

作者:Yuan Tang

更新于:5 个月前

字数统计:336 字

阅读时长:1 分钟

nzTreeComponent 是一个 UI 组件，它是由 Ant Design of Angular 提供的。在这个例子中， nzTreeComponent 是在组件模板中使用的，例如：

<nz-tree #nzTreeComponent [nzData]="nodes" [nzCheckable]="true" [nzCheckStrictly]="true" (nzClick)="clickNode($event)" (nzCheckBoxChange)="checkNode($event)">
</nz-tree>

在模板中， nz-tree 标签就是 nzTreeComponent 组件的标签，通过 #nzTreeComponent 将组件实例命名为 nzTreeComponent ，以便在组件类中使用 @ViewChild 装饰器获取组件实例。在组件类中，可以使用以下代码获取 nzTreeComponent 的实例：

@ViewChild('nzTreeComponent') treedom: any;

这样， treedom 变量就是 nzTreeComponent 的实例，可以使用它来操作树形组件，例如获取数据源、展开或折叠节点、获取选中的节点等等。

只要在组件模板中定义了 #nzTreeComponent ，在任何一个组件的 TypeScript 文件中都可以使用 @ViewChild('nzTreeComponent') 来获取树形组件的实例。这是因为 #nzTreeComponent 定义的是一个模板引用变量，它在组件模板中是全局唯一的，可以在任何一个组件中使用。而 @ViewChild 装饰器是 Angular 中的一个装饰器，它可以用来获取组件模板中的 DOM 元素或组件实例，只要指定了相应的模板引用变量，就可以在任何一个组件的 TypeScript 文件中获取到相应的 DOM 元素或组件实例。

Contributors

Yuan Tang