0%

常见的Angular装饰器

发表于 更新于
本文字数： 3.8k 阅读时长 ≈ 3 分钟

1. @Attribute

顾名思义，是用来寻找宿主元素属性值的。

1
@Directive({
2
  selector: '[test]'
3
})
4
export class TestDirective {
5
  constructor(
6
    @Attribute('type') type
7
  ) {
8
    console.log(type); // text
9
  }
10
}
11
  
12
@Component({
13
  selector: 'my-app',
14
  template: `
15
    <input type="text" test>
16
  `,
17
})
18
export class App {}

2. @ViewChildren

  • 装饰器可以从View DOM返回指定的元素或指令作为queryList。queryList存储的是项目列表对象，值得注意的是：当应用程序的状态发生变化时，Angular会自动为queryList更新对象项。
  • queryList有很多API，其中：
    • getter属性：
      • first — 获取第一个item
      • last — 获取最后一个item
      • length — 返回queryList的长度
    • Method方法：
      • map()，filter()，find()，reduce()，forEach()，some()。
      • 其中toArray()，可以返回items形式的数组。
      • changes()可以进行订阅，返回items的Observable。
  • queryist注意事项：
    • 只有在ngAfterViewInit生命周期方法之后才能得到。
    • 返回的item不包含ng-content标签里的item。
  • 默认情况下，queryList返回的组件的实例，如果想要返回原生的Dom，则需要声明第二个参数，例如：@ViewChildren(AlertComponent, { read: ElementRef }) alerts: QueryList<AlertComponent>
1
@Component({
2
  selector: 'alert',
3
  template: `
4
    {{type}}
5
  `,
6
})
7
export class AlertComponent {
8
  @Input() type: string = "success";
9
}
10
11
@Component({
12
  selector: 'my-app',
13
  template: `
14
    <alert></alert>
15
    <alert type="danger"></alert>
16
    <alert type="info"></alert>
17
  `,
18
})
19
export class App {
20
  @ViewChildren(AlertComponent) alerts: QueryList<AlertComponent>
21
  
22
  ngAfterViewInit() {
23
    this.alerts.forEach(alertInstance => console.log(alertInstance));
24
  }
25
}

3. @ViewChild

和ViewChildren类似，但它只返回匹配到的第一个元素或与视图DOM中的选择器匹配的指令。

1
@Component({
2
  selector: 'alert',
3
  template: `
4
    {{type}}
5
  `,
6
})
7
export class AlertComponent {
8
  @Input() type: string = "success";
9
}
10
11
@Component({
12
  selector: 'my-app',
13
  template: `
14
    <alert></alert>
15
    <div #divElement>Tada!</div>
16
  `,
17
})
18
export class App {
19
  // 返回宿主元素
20
  @ViewChild("divElement") div: any;
21
  // 返回组件实例
22
  @ViewChild(AlertComponent) alert: AlertComponent;
23
  
24
  ngAfterViewInit() {
25
    console.log(this.div);
26
    console.log(this.alert);
27
  }
28
}

4. @ContentChildren

装饰器从Content DOM返回指定的元素或指令作为queryList，值得注意的是：

  • 只有在ngAfterViewInit生命周期方法之后才能得到。
  • ContentChildren仅包含ng-content标签内存在的元素。
  • 返回的queryList和@ViewChildren一样。
1
@Component({
2
  selector: 'tab',
3
  template: `
4
    <p>{{title}}</p>
5
  `,
6
})
7
export class TabComponent {
8
  @Input() title;
9
}
10
11
@Component({
12
  selector: 'tabs',
13
  template: `
14
    <ng-content></ng-content>
15
  `,
16
})
17
export class TabsComponent {
18
 @ContentChildren(TabComponent) tabs: QueryList<TabComponent>
19
 
20
 ngAfterContentInit() {
21
   this.tabs.forEach(tabInstance => console.log(tabInstance))
22
 }
23
}
24
25
@Component({
26
  selector: 'my-app',
27
  template: `
28
    <tabs>
29
     <tab title="One"></tab>
30
     <tab title="Two"></tab>
31
    </tabs>
32
  `,
33
})
34
export class App {}

5. @ContentChild

和@ContentChildren类似，但仅返回与Content DOM中的选择器匹配的第一个元素或指令。

1
@Component({
2
  selector: 'tabs',
3
  template: `
4
    <ng-content></ng-content>
5
  `,
6
})
7
export class TabsComponent {
8
 @ContentChild("divElement") div: any;
9
 
10
 ngAfterContentInit() {
11
   console.log(this.div);
12
 }
13
}
14
15
@Component({
16
  selector: 'my-app',
17
  template: `
18
    <tabs>
19
     <div #divElement>Tada!</div>
20
    </tabs>
21
  `,
22
})
23
export class App {}

6. @HostBinding

声明一个属性绑定到hosts上。

1
@Directive({
2
  selector: '[host-binding]'
3
})
4
export class HostBindingDirective {
5
  @HostBinding("class.tooltip") tooltip = true;
6
  
7
  @HostBinding("class.tooltip") 
8
  get tooltipAsGetter() {
9
    // 你的逻辑
10
    return true;
11
  };
12
   
13
  @HostBinding() type = "text";
14
}
15
16
@Component({
17
  selector: 'my-app',
18
  template: `
19
    <input type="text" host-binding> // 'tooltip' class 将被添加到host元素上
20
  `,
21
})
22
export class App {}

7. @HostListener

敬请期待，学习中…