1. @Attribute

顧名思義闭翩，是用來尋找宿主元素屬性值的。

@Directive({
  selector: '[test]'
})
export class TestDirective {
  constructor(
    @Attribute('type') type
  ) {
    console.log(type); // text
  }
}
  
@Component({
  selector: 'my-app',
  template: `
    <input type="text" test>
  `,
})
export class App {}

2. @ViewChildren

• 裝飾器可以從View DOM返回指定的元素或指令作為queryList浸船。queryList存儲的是項目列表對象妄迁，值得注意的是：當(dāng)應(yīng)用程序的狀態(tài)發(fā)生變化時，Angular會自動為queryList更新對象項糟袁。
• queryList有很多API判族，其中：
  • getter屬性：
    • first — 獲取第一個item
    • last — 獲取最后一個item
    • length — 返回queryList的長度
  • Method方法：
    • map()，filter()项戴，find()形帮，reduce()，forEach()周叮，some()辩撑。
    • 其中toArray()，可以返回items形式的數(shù)組仿耽。
    • changes()可以進(jìn)行訂閱合冀，返回items的Observable。
• queryist注意事項：
  • 只有在ngAfterViewInit生命周期方法之后才能得到项贺。
  • 返回的item不包含ng-content標(biāo)簽里的item君躺。
• 默認(rèn)情況下，queryList返回的組件的實例开缎，如果想要返回原生的Dom棕叫，則需要聲明第二個參數(shù)，例如：@ViewChildren(AlertComponent, { read: ElementRef }) alerts: QueryList<AlertComponent>

@Component({
  selector: 'alert',
  template: `
    {{type}}
  `,
})
export class AlertComponent {
  @Input() type: string = "success";
}

@Component({
  selector: 'my-app',
  template: `
    <alert></alert>
    <alert type="danger"></alert>
    <alert type="info"></alert>
  `,
})
export class App {
  @ViewChildren(AlertComponent) alerts: QueryList<AlertComponent>
  
  ngAfterViewInit() {
    this.alerts.forEach(alertInstance => console.log(alertInstance));
  }
}

3. @ViewChild

和ViewChildren類似奕删，但它只返回匹配到的第一個元素或與視圖DOM中的選擇器匹配的指令俺泣。

@Component({
  selector: 'alert',
  template: `
    {{type}}
  `,
})
export class AlertComponent {
  @Input() type: string = "success";
}

@Component({
  selector: 'my-app',
  template: `
    <alert></alert>
    <div #divElement>Tada!</div>
  `,
})
export class App {
  // 返回宿主元素
  @ViewChild("divElement") div: any;
  // 返回組件實例
  @ViewChild(AlertComponent) alert: AlertComponent;
  
  ngAfterViewInit() {
    console.log(this.div);
    console.log(this.alert);
  }
}

4. @ContentChildren

裝飾器從Content DOM返回指定的元素或指令作為queryList，值得注意的是：

• 只有在ngAfterViewInit生命周期方法之后才能得到。
• ContentChildren僅包含ng-content標(biāo)簽內(nèi)存在的元素伏钠。
• 返回的queryList和@ViewChildren一樣横漏。

@Component({
  selector: 'tab',
  template: `
    <p>{{title}}</p>
  `,
})
export class TabComponent {
  @Input() title;
}

@Component({
  selector: 'tabs',
  template: `
    <ng-content></ng-content>
  `,
})
export class TabsComponent {
 @ContentChildren(TabComponent) tabs: QueryList<TabComponent>
 
 ngAfterContentInit() {
   this.tabs.forEach(tabInstance => console.log(tabInstance))
 }
}

@Component({
  selector: 'my-app',
  template: `
    <tabs>
     <tab title="One"></tab>
     <tab title="Two"></tab>
    </tabs>
  `,
})
export class App {}

5. @ContentChild

和@ContentChildren類似，但僅返回與Content DOM中的選擇器匹配的第一個元素或指令熟掂。

@Component({
  selector: 'tabs',
  template: `
    <ng-content></ng-content>
  `,
})
export class TabsComponent {
 @ContentChild("divElement") div: any;
 
 ngAfterContentInit() {
   console.log(this.div);
 }
}

@Component({
  selector: 'my-app',
  template: `
    <tabs>
     <div #divElement>Tada!</div>
    </tabs>
  `,
})
export class App {}

6. @HostBinding

聲明一個屬性綁定到hosts上缎浇。

@Directive({
  selector: '[host-binding]'
})
export class HostBindingDirective {
  @HostBinding("class.tooltip") tooltip = true;
  
  @HostBinding("class.tooltip") 
  get tooltipAsGetter() {
    // 你的邏輯
    return true;
  };
   
  @HostBinding() type = "text";
}

@Component({
  selector: 'my-app',
  template: `
    <input type="text" host-binding> // 'tooltip' class 將被添加到host元素上
  `,
})
export class App {}

7. @HostListener

敬請期待，學(xué)習(xí)中...