0%

angular 获取指令的引用

有时候需要在组件的ts中获取指令的实例来做一些事情,那么,我们如何获取到指令的实例引用呢?如果一个组件中有多个相同指令,我们该如何获得一批或者特定的引用呢?

有指令:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import { Directive, Input } from "@angular/core";

@Directive({
selector: '[myDir]',
exportAs: 'myDir',
})
export class MyDirective {
@Input() id: number;

constructor() {
console.log('id', this.id);
}

logSomething() {
console.log('id: ', this.id);
}
}

在页面中的使用:

1
<div myDir id=1>dir 1</div>

在ts中获得指令的引用:

1
2
3
4
@ViewChild(MyDirective, { static: false }) dirRef?: MyDirective;
ngAfterViewInit() {
this.dirRef.logSomething();
}

在运行后输出:id: 1

但是,有时候一个组件中会使用多个相同的指令,这个时候怎么获取引用?

1
2
<div myDir id=1>dir 1</div>
<div myDir id=2>dir 2</div>

如果使用上面的方法的话,我们获取的只是第一个指令,我们需要使用ViewChildren

1
@ViewChildren(MyDirective) dirRefList?: QueryList<MyDirective>;

获得的数据是一个QueryList的类数组结构的数据。

那我们需要获取里面的特定一个怎么办?

可以使用上面的的@ViewChildren获取到QueryList,然后再使用find()来找到特定的某一个。但是这样太累。可以使用模板变量的方法。

指令有一个元数据项为:exportAs,可以顶一个名字,用于在模板中把改指令赋给一个变量:

1
<div #myDirDom=myDir myDir id=3>dir 3</div>

然后在ts中:

1
@ViewChild('myDirDom', {static: false}) dirRef3?: MyDirective;

这样就可以获取到我们需要的那个指令的实例引用了。

ViewChild

ViewChild是属性装饰器,用来配置一个视图查询。变更检测器会在视图的DOM中查找能匹配上改选择器的第一个元素或指令。如果视图的DOM发生了变化,出现了匹配改选择器的新的子节点,该属性会被更新。

元数据属性:

  • selector: 选择器,用于查询的指令类型或名字
  • read: 从查询到的元素中读取另一个令牌
  • static: 是否在更改检测运行之前解析查询结果(即仅返回金泰结果)

支持的选择器包括:

  • 任何带有@Component@Directive装饰器的类
  • 字符串形式的模板引用变量
  • 组件树种任何当前组件的子组件所定义的提供商(比如@ViewChild(SomeService)
  • 任何通过字符串令牌定义的提供商
  • TemplateRef

ViewChildren

使用ViewChildren可以从视图DOM中获取元素或指令的QueryList,每当添加、删除或移动子元素时,查询列表都会更新,并将变更的值以Observable的形式发出。

视图查询的操作是在调用ngAfterViewInit回调之前设置的。

元数据属性:

  • selector: 选择器,用户查询指令类型或名称。
  • read: 从查询的元素中读取一个不同的令牌。如果有组件和指令,则read参数运行指定应返回哪个实例。例如,动态创建的组件,而不是默认的ElementRef,需要ViewContainerRef: @ViewChild ('name', {read: ViewContainerRef}) target;

QueryList

QueryList为从视图DOM中获取到的不可修改的条目列表。当应用状态变化是,Angular会保证它是最新的。QueryList有实现可迭代接口,因此,它可以用于for...of循环和angular的模板语法中的ngFor

可以通过订阅changes这个Observable来监听这些变化:

1
this.queryList.changes.subscribe(r => {});

QueryList的属性

  • dirty
  • changes: Observable
  • length: number
  • first: T
  • last: T

QueryList的方法

  • map ()
  • filter ()
  • find ()
  • reduce ()
  • forEach ()
  • some ()
  • toArray ()
  • toString ()
  • reset ()
  • notifyOnChanges ()
  • setDirty ()
  • destroy ()

over~