0%

angular 获取指令的引用

Posted on Edited on In Views: Valine:
Symbols count in article: 2.2k Reading time ≈ 2 mins.

有时候需要在组件的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~

码字辛苦，打赏个咖啡☕️可好？💘