? ? ? ?裝飾器的作用就是在添加裝飾器的地方在不改動原有代碼的情況下增加額外的功能璧眠。Angular框架中裝飾器是一個函數(shù)。他將元數(shù)據(jù)添加到類、類成員(屬性蝌借、方法)和函數(shù)參數(shù)上。讓它們在不需要做任何代碼變動的前提下增加額外功能指蚁。

1 類裝飾器

? ? ? ?類裝飾器負責把元數(shù)據(jù)附加到類上菩佑，以了解類的設計意圖以及這個類是如何工作的。Angular框架里面類裝飾器有多種．如下所示：

1.1 @NgModule

? ? ? ?@NgModule用來描述Angular應用里面的模塊(NgModule)的雄可。也就是說NgModule是一個帶有@NgModule裝飾器的類。@NgModule的參數(shù)是一個元數(shù)據(jù)對象缠犀，用于描述如何編譯組件的模板数苫，以及如何在運行時創(chuàng)建注入器。

和其他語言一樣辨液，模塊指的就是把某些功能整合到一起形成一個模塊．模塊話編程．

? ? ? ?Angular應用是模塊化的虐急，擁有自己的模塊化系統(tǒng)．一個模塊就是一個NgModule。每個NgModule就是一個容器滔迈，用于存放一些內(nèi)聚的代碼塊止吁，這些代碼塊專注于某個應用領域、或者某個工作流或一組緊密相關的功能燎悍。它可以包含一些組件敬惦、服務提供商或其它代碼文件，其作用域由包含它們的NgModule定義谈山。它還可以導入一些由其它模塊中導出的功能俄删，并導出一些指定的功能供其它NgModule使用。

? ? ? ?每個Angular應用至少有一個模塊，也就是根模塊畴椰，習慣上命名為AppModule臊诊，位于一個名叫app.module.ts的文件中。引導這個根模塊就可以啟動你的應用斜脂。

1.1.1 @NgModule元數(shù)據(jù)解釋

1.1.2 NgModule作用：

• NgModule 最主要的作用是幫助開發(fā)者組織業(yè)務代碼，把關系比較緊密的一些功能(組件)代碼組合在一起鼻吮。

• NgModule 用來控制組件育苟、指令、管道等是否可以使用椎木，處于同一個 NgModule 里面的組件默認互相可見违柏，而對于外部的組件來說，只能看到 NgModule 導出(exports )的內(nèi)容香椎，也就是說漱竖，如果你定義的 NgModule不exports任何內(nèi)容，那么外部使用者即使 import了你這個模塊士鸥，也沒法使用里面定義的任何內(nèi)容闲孤。

• NgModule 是打包時候用到的最小單位，打包的時候會檢查所有 @NgModule 和路由配置，Angular底層是使用webpack打包讼积。因為Angular已經(jīng)幫我們配置好了webpack肥照，所以開發(fā)者輕松很多，否則就需要自己配置環(huán)境勤众。

1.2 @Directive

? ? ? ?@Directive修飾的類是指令類舆绎。在Angular應用中指令一般用來控制組件(ＤＯＭ)的某些行為。Angular框架也默認給我們提供很多指令们颜，有結構型指令吕朵，屬性型指令。

• 結構型指令: 通過添加和移除DOM元素改變DOM布局的指令． 如NgFor和NgIf．
• 屬性型指令: 改變元素窥突、組件或其它指令的外觀和行為的指令努溃。 如NgStyle 和NgSwitch．

1.1.1 @Directive元數(shù)據(jù)解釋

inputs和outputs: 當前指令(組件)的輸入和輸出尸执。但是最新的Angular版本已經(jīng)不推薦使用這兩個屬性了，推薦使用@Input()眠屎，@Output()來代替剔交。

@Component({
  selector: 'app-report-template',
  template:
    `
       <div>
         <pre>{{hero}}</pre>
         <button (click)="deleteRequestInit()">Get</button>
       </div>
     `,
  inputs: ['hero'],
  outputs: ['deleteRequest'],
})
export class ReportTemplateComponent {

  public deleteRequest = new EventEmitter();

  deleteRequestInit() {
    this.deleteRequest.emit({'message': 'Are you sure you want to delete this record!.'})
  }
}

// 等價于下面的代碼

@Component({
  selector: 'app-report-template',
  template:
    `
       <div>
         <pre>{{hero}}</pre>
         <button (click)="deleteRequestInit()">Get</button>
       </div>
     `,
})
export class ReportTemplateComponent {

  @Input()
  hero;

  @Output()
  deleteRequest = new EventEmitter<any>();

  deleteRequestInit() {
    this.deleteRequest.emit({'message': 'Are you sure you want to delete this record!.'})
  }
}

host：使用一組鍵-值對，把類的屬性映射到宿主元素的綁定（Property改衩、Attribute和事件）岖常。

? ? ??Angular在變更檢測期間會自動檢查宿主Property綁定。如果綁定的值發(fā)生了變化葫督，Angular 就會更新該指令的宿主元素竭鞍。當 key 是宿主元素的 Property 時，這個 Property 值就會傳播到指定的 DOM 屬性橄镜。當 key 是 DOM 中的靜態(tài) Attribute 時偎快，這個 Attribute 值就會傳播到宿主元素上指定的 Property 去。對于事件處理：它的 key 就是該指令想要監(jiān)聽的 DOM 事件洽胶。 要想監(jiān)聽全局事件晒夹，請把要監(jiān)聽的目標添加到事件名的前面。 這個目標可以是 window、document 或 body丐怯。它的value就是當該事件發(fā)生時要執(zhí)行的語句喷好。如果該語句返回 false，那么就會調(diào)用這個DOM事件的preventDefault函數(shù)读跷。這個語句中可以引用局部變量 $event 來獲取事件數(shù)據(jù)梗搅。比如如下的代碼實例。

    @Component({
       host: {
         '[class.nav-static]' : 'config.state["nav-static"]',
         '[class.chat-sidebar-opened]' : 'chatOpened',
         '[class.app]' : 'true',
         id: 'app'
       }
     })
   
    @Component({
       host: {
         'class' : 'myclass1 myclass2 myclass3'
       }
     })
   
    @Component({
       host: {
         '(window:blur)': 'focusOutFunction($event)',
         '(window:focus)': 'focusInFunction($event)',
       }
     })

exportAs：一個或多個名字效览，可以用來在模板中把該指令賦值給一個變量无切。當有多個名字時，請使用逗號分隔它們丐枉，我們用一個簡單的例子來說明下：

   1. 定義一個指令 AdHostDirective哆键，exportAs: 'adHost'
    @Directive({
       selector: '[ad-host]',
       exportAs: 'adHost'
    })
    export class AdHostDirective {
       constructor(public viewContainerRef: ViewContainerRef) {
       }
    }
   
   
    2. 在模板中使用該指令，我們同事添加了兩次 #test='adHost'瘦锹，#test1='adHost'
   
     <div>
       <!-- 動態(tài)組件存放的容器 -->
       <ng-template ad-host #test='adHost'></ng-template>
       <!-- 動態(tài)組件存放的容器 -->
       <ng-template ad-host #test1='adHost'></ng-template>
     </div>
   
  
    3. 最后我們需要在對應的ts里面獲取到該指令對象

     // @ViewChild(AdHostDirective) adHost: AdHostDirective; 單個的情況洼哎，可以使用，多個的情況比較麻煩
     @ViewChild('test') adHost: AdHostDirective;
     @ViewChild('test1') adHost1: AdHostDirective;
   
   
    通過exportAs 如果同意個模板里面有同一個指令多個的話沼本，我們可以很簡單的獲取到對應的指令。如果不用這種方式很麻煩的

queries：配置將要注入到該指令(組件)中的一些查詢锭沟，內(nèi)容查詢會在調(diào)用 ngAfterContentInit 回調(diào)之前設置好抽兆。 試圖查詢會在調(diào)用 ngAfterViewInit 回調(diào)之前設置好。說白了queries的使用就是@ViewChild族淮，@ViewChildren辫红，@ContentChil，@ContentChildren的使用祝辣。比如如下兩段代碼是等價的贴妻。

@Component({
  selector: 'app-report-template',
  templateUrl: './report-template.component.html',
  styleUrls: ['./report-template.component.less'],
  queries: {
    adHost: new ViewChild(AdHostDirective)
  }
})
export class ReportTemplateComponent {
  
  adHost: AdHostDirective;

}

// 等價于下面的代碼

@Component({
  selector: 'app-report-template',
  templateUrl: './report-template.component.html',
  styleUrls: ['./report-template.component.less'],
  viewProviders: [ReportTemplateService]
})
export class ReportTemplateComponent {
  
  @ViewChild(AdHostDirective) 
  adHost: AdHostDirective;

}

1.2 @Component

? ? ? ?聲明一個組件時，在組件類上要用@Component裝飾器來告知Angular這是一個組件蝙斜。

? ? ? ?組件控制屏幕上被稱為視圖的一小片區(qū)域名惩。在組件類總定義組件的應用邏輯。在Angular應用中組件(Component)是屬于模塊(NgMoude)的孕荠。組件是比模塊更小的一個單元娩鹉。

1.2.1 @Component元數(shù)據(jù)解釋

? ? ? ?因為Component是繼承Directive的，Component也是指令的一種．所以指令能做到的事情Component也能做到．上面講的@Directive元數(shù)據(jù)都適用于@Component稚伍。

除了@Directive的元數(shù)據(jù)之外弯予，@Component元數(shù)據(jù)元數(shù)據(jù)還有如下屬性。

encapsulation：供模板和 CSS 樣式使用的樣式封裝策略戒洼。取值有如下幾種：ViewEncapsulation.Native(使用 Shadow DOM俏橘。它只在原生支持 Shadow DOM的平臺上才能工作)、ViewEncapsulation.Emulated(使用墊片（shimmed)CSS來模擬原生行為)圈浇、ViewEncapsulation.None(使用全局CSS寥掐，不做任何封裝禀横。如果沒有提供费奸，該值就會從CompilerOptions中獲取它)。默認的編譯器選項是ViewEncapsulation.Emulated蚕脏。如果該策略設置為ViewEncapsulation.Emulated褐隆，并且該組件沒有指定styles或styleUrls污它，就會自動切換到ViewEncapsulation.None。

1.3 @Pipe

? ? ? ?@Pipe修飾的類是管道類妓灌。在Angular應用中轨蛤，管道的作用就是傳輸，可以把一個值通過某種變換成一個新的值虫埂。(其實就是對數(shù)據(jù)做進一步的處理)

1.3.1 @Pipe元數(shù)據(jù)

1.3.2 Pipe使用

? ? ? ?我們自定義一個文件大小轉換的管道．把相應的文件大小轉換成對應的單位對應的大小．自定義一個FileSizePipe管道．代碼如下．

import {Pipe, PipeTransform} from '@angular/core';

/**
 * 文件大小轉換
 */
@Pipe({
  name: 'fileSize'
})
export class FileSizePipe implements PipeTransform {

  private static TB_UNIT = 'TB';
  private static GB_UNIT = 'GB';
  private static MB_UNIT = 'MB';
  private static KB_UNIT = 'KB';
  private static B_UNIT = 'B';

  // TB
  private static fileSizeTb(fileSize: number) {
    return fileSize / (1024 * 1024 * 1024 * 1024);
  }

  // GB
  private static fileSizeGb(fileSize: number) {
    return fileSize / (1024 * 1024 * 1024);
  }

  // MB
  private static fileSizeMb(fileSize: number) {
    return fileSize / (1024 * 1024);
  }

  // KB
  private static fileSizeKb(fileSize: number) {
    return fileSize / 1024;
  }

  /**
   * {{ value | fileSize }}
   * {{ value | fileSize:fractionDigits }}
   * {{ value | fileSize:fractionDigits:extension }}
   */
  transform(value: number, fractionDigits?: number, extension?: 'B' | 'KB' | 'MB' | 'GB' | 'TB'): string {
    if (value == null) {
      return null;
    }
    const realFractionDigits = fractionDigits == null ? 2 : fractionDigits;
    if (extension == null) {
      // TB
      if (value >= (1024 * 1024 * 1024 * 1024)) {
        return FileSizePipe.fileSizeTb(value).toFixed(realFractionDigits) + FileSizePipe.TB_UNIT;
      } else if (value >= (1024 * 1024 * 1024)) {
        return FileSizePipe.fileSizeGb(value).toFixed(realFractionDigits) + FileSizePipe.GB_UNIT;
      } else if (value >= (1024 * 1024)) {
        return FileSizePipe.fileSizeMb(value).toFixed(realFractionDigits) + FileSizePipe.MB_UNIT;
      } else if (value >= 1024) {
        return FileSizePipe.fileSizeKb(value).toFixed(realFractionDigits) + FileSizePipe.KB_UNIT;
      } else {
        return value.toFixed(realFractionDigits) + FileSizePipe.B_UNIT;
      }
    } else {
      switch (extension) {
        case "TB":
          return FileSizePipe.fileSizeTb(value).toFixed(realFractionDigits) + FileSizePipe.TB_UNIT;
        case "GB":
          return FileSizePipe.fileSizeGb(value).toFixed(realFractionDigits) + FileSizePipe.GB_UNIT;
        case "MB":
          return FileSizePipe.fileSizeMb(value).toFixed(realFractionDigits) + FileSizePipe.MB_UNIT;
        case "KB":
          return FileSizePipe.fileSizeKb(value).toFixed(realFractionDigits) + FileSizePipe.KB_UNIT;
        case "B":
          return value.toFixed(realFractionDigits) + FileSizePipe.B_UNIT;
      }
    }
    return null;
  }

}

使用

<p>
  {{1024 | fileSize}}
</p>

<p>
  {{1024 * 10 | fileSize}}
</p>

<!-- 保留三位小數(shù) -->
<p>
  {{1024 * 1024 * 3 | fileSize:3}}
</p>

<!-- 保留三位小數(shù)源祈，并且轉換成MB -->
<p>
  {{1024 * 1024 * 2 | fileSize:3:'MB'}}
</p>

1.4 @Injectable

? ? ? ?@Injectable修飾的類煎源，表示當前類是一個服務類。該類需要通過注入器根據(jù)服務提供者去創(chuàng)建服務對象香缺。然后給需要使用的地方使用手销。這里就涉及到Angular應用里面的依賴注入問題了。有興趣的可以參考图张。

當然了根據(jù)服務提供者的不同锋拖，還有其他不同的參數(shù)。具體可以參考咱們的上一篇文章　　　Angular依賴注入

2 屬性裝飾器

? ? ? ?屬性裝飾器：把裝飾器添加在屬性上祸轮，是屬性具有額外的一些功能兽埃。Angular系統(tǒng)里面屬性裝飾器有很多，如下：

@Input

? ? ? ?@Input: 負責把父組件的數(shù)據(jù)傳遞到子組件。然后在子組件里面做相應的處理痪蝇。這個就沒什么講的了，使用起來也簡單．

? ? ? ?Input裝飾器支持一個可選的參數(shù)冕房，用來指定組件綁定屬性的名稱躏啰。如果沒有指定，則默認使用@Input對應裝飾的屬性名耙册。不推薦為起別名给僵，推薦直接使用默認的名字。

? ? ? ?使用@Input的時候我們也可以通過setter详拙，以攔截父組件中值的變化帝际，在子組件中采取相應的動作。

@Output

? ? ? ?子組件暴露一個EventEmitter屬性饶辙，當事件發(fā)生時蹲诀，子組件利用該屬性emits(向上彈射)事件。父組件綁定到這個事件屬性弃揽，并在事件發(fā)生時作出回應脯爪。子組件的EventEmitter屬性是一個輸出屬性则北，通常帶有@Output 裝飾器。

@ViewChild痕慢、@ViewChildren

? ? ? ? @ViewChild尚揣、@ViewChildren：從模板視圖中獲取匹配的元素．

import {Component, ElementRef, ViewChild, ViewChildren, ViewContainerRef} from '@angular/core';
import {ViewChildChildComponent} from './view-child-child.component';

@Component({
  selector: 'app-decorator-view-child',
  template: `
    <h3>@ViewChild,@ViewChildren(從模板視圖中獲取匹配的元素)</h3>
    <app-view-child-child #childA></app-view-child-child>
    <app-view-child-child #childB></app-view-child-child>
    <button (click)="clickMe()" >點我</button>

  `
})
export class DecoratorViewChildComponent {

  /**
   * @ViewChild 的使用
   */
    // 使用模板變量名
  @ViewChild('childA')
  child10;
  // 使用類型查詢
  @ViewChild(ViewChildChildComponent)
  child11;
  // 使用模板變量名及設置查詢條件
  @ViewChild('childB', {read: ElementRef})
  child20;
  @ViewChild('childB', {read: ViewContainerRef})
  child21;

  /**
   * @ViewChildren 的使用
   */
  @ViewChildren(ViewChildChildComponent)
  children;

  clickMe() {
    this.child10.callFunction('child10');
    this.child11.name = '我是child2';

    this.child20.nativeElement.lastElementChild.firstElementChild.value = '我是child3~';
    this.child21._data.componentView.component.callFunction('child21');

    this.children._results[0].callFunction('children');
  }

}

@ContentChild、@ContentChildren

? ? ? ?@ContentChild掖举、@ContentChildren：用于選擇當前組件引用的內(nèi)容(從ng-content中獲取元素) ．一般在自定義組件的時候使用．

比如如下的代碼快骗，我們自定義一個組件ContentParentComponent．在這個組件里面通過＠ContentChild獲取到ng-conent里面的內(nèi)容

import {AfterContentInit, Component, ContentChild} from '@angular/core';
import {ContentChildComponent} from './content-child.component';

@Component({
  selector: 'app-content-parent',
  template: `
    <p>Parent Component</p>
    <!-- ng-content 讓使用該組件的人可以自定義里面的內(nèi)容 -->
    <ng-content></ng-content>
  `
})
export class ContentParentComponent implements AfterContentInit {

  // 通過類型獲取 -- ngAfterContentInit　(事先我們明確了ng-content里面會放置ContentChildComponent組件)
  @ContentChild(ContentChildComponent)
  contentChild: ContentChildComponent;

  constructor() {
  }

  ngAfterContentInit() {
    // 對應contentChild做相應的操作處理
    this.contentChild.initValue = '@ContentChild';
  }

}

@Hostbinding

? ? ? ?@Hostbinding：為宿主元素添加屬性值．

@HostListener

? ? ? ?@HostListener：為宿主元素添加事件．

下面我們通過一個簡單的實例來說明@Hostbinding，@HostListener的使用．咱們自定義一個指令RainbowDirective．這樣所有使用該指令的地方就是宿主元素了．這樣可以對添加了該指令的元素做相應的改變．

import {Directive, HostBinding, HostListener} from '@angular/core';

/**
 * 主要是說明@HostBinding塔次、@HostListener使用
 */
@Directive({
  selector: '[appRainbow]',
  exportAs: 'appRainbow'
})
export class RainbowDirective {

  possibleColors = [
    'darksalmon', 'hotpink', 'lightskyblue', 'goldenrod', 'peachpuff',
    'mediumspringgreen', 'cornflowerblue', 'blanchedalmond', 'lightslategrey'
  ];

  // 為宿主元素添加屬性值
  @HostBinding('style.color') color: string;
  @HostBinding('style.borderColor') borderColor: string;

  // 為宿主元素添加事件
  @HostListener('keydown') onKeydown() {
    // 隨機去一個顏色
    const colorPick = Math.floor(Math.random() * this.possibleColors.length);
    this.color = this.borderColor = this.possibleColors[colorPick];
  }

}

<input appRainbow>

3 參數(shù)裝飾器

? ? ? ?將裝飾器添加在參數(shù)上面方篮，一般都是構造函數(shù)的參數(shù)上。獲取注入器里面提供的服務對象俺叭。在咱們Angular框架里面注入器一般分為兩種：組件注入器恭取、模塊注入器。組件注入器里面注入的服務對象一般通過@Component裝飾器里面的provider元數(shù)據(jù)提供熄守。模塊注入器里面注入的服務對象一般通過@NgModule裝飾器里面的provider元數(shù)據(jù)提供蜈垮。

@Inject

? ? ? ?@Inject 用于獲取注入器里面注入的token對應的服務實例對象攒发。@Inject也是咱們用的最多的一個獲取依賴對象的裝飾器。

@Optional

? ? ? ?@Optional和@Inject類似晋南，唯一的區(qū)別就是當注入器里面沒有找到token對應的對象的時候返回null惠猿。所以在使用@Optional的時候一定要做null值的處理。

@Self

? ? ? ?從當前組件注入器里面查找依賴對象负间。再強調(diào)一遍是當前組件注入器里面查找偶妖，找到了就找到了，沒找到就沒找到政溃。

@Self查找范圍：當前組件注入器。

import {Component, Inject, Injector, OnInit, Self} from '@angular/core';
import {SelfComponentService} from './self-component.service';
import {TOKEN_SKIP_CLASS_PROVIDER} from "../parameter-decorator-constant";
import {SelfTokenComponentService} from "./self-token-component.service";

@Component({
  selector: 'app-self-decorator',
  template: `
    <h3>@Self -- 獲取當前組件(或者指令)注入器里面注入的對象(NgModule里面注入的都不行)</h3>
  `,
  providers: [
    SelfComponentService,
    {provide: TOKEN_SKIP_CLASS_PROVIDER, useClass: SelfTokenComponentService}
  ]
})
export class SelfDecoratorComponent implements OnInit {

  /**
   * @Self()只能獲取當前組件注入器中注入的服務董虱，NgModule 注入器里面注入的都不行
   */
  constructor(private injector: Injector,
              @Self() private componentService: SelfComponentService,
              @Self() @Inject(TOKEN_SKIP_CLASS_PROVIDER) private tokenComponentService: SelfTokenComponentService) {

    // // injector.get(SelfModuleService, null, InjectFlags.Self)這種寫法好像有點問題，講道理是獲取不到服務的
    // const service: SelfModuleService = injector.get(SelfModuleService, null, InjectFlags.Self);

  }

  ngOnInit() {
  }

}

? ? ? ?@Self也可以和@Optional一起使用．這樣在沒有找到的情況下賦null值．如下所示

@Optional() @Self() private componentService: SelfComponentService

@SkipSelf

? ? ? ?從當前元素對應注入器的祖先注入器中查找云头。

@SkipSelf查找范圍：祖先組件注入器以及模塊注入器。(排除自身組件注入器)

? ? ? ?@SkipSelf也可以和@Optional一起使用

@Host

? ? ? ?獲取宿主元素注入器里面注入的對象溃槐。

父子組件關系不屬于宿主關系。所以@Host在父子關系使用不了竿痰。

? ? ? ?這里為了給大家講明白宿主關系脆粥，我們列出@Host的兩種場景影涉。

• 在指令里面使用@Host(指令宿主關系)

? ? ? ?指令里面使用@Host獲取宿主元素注入器里面提供的對象。

import {Directive, Host, Inject} from '@angular/core';
import {HostComponentService} from './host-component.service';
import {TOKEN_HOST_CLASS_PROVIDER} from '../parameter-decorator-constant';
import {HostTokenComponentService} from './host-token-component.service';

@Directive({
  selector: '[appHostDecorator]'
})
export class HostDecoratorDirective {

  /**
   * @Host() 獲取宿主元素里面提供的服務(宿主元素注入器提供的服務)
   * @param componentService
   * @param tokenService
   */
  constructor(@Host() private componentService: HostComponentService,
              @Host() @Inject(TOKEN_HOST_CLASS_PROVIDER) private tokenService: HostTokenComponentService) {
  }

}

• 在ng-content使用@Host(ng-conent宿主關系)

自定義一個組件蟹倾，注意使用了<ng-content>

import {Component} from '@angular/core';
import {HostComponentService} from './host-component.service';
import {TOKEN_HOST_CLASS_PROVIDER} from '../parameter-decorator-constant';
import {HostTokenComponentService} from './host-token-component.service';

@Component({
  selector: 'app-host-decorator',
  template: `
    <h3>@Inject -- 獲取注入器里面指定token對應的服務實例對象</h3>
    <ng-content></ng-content>
  `,
  providers: [
    HostComponentService,
    {provide: TOKEN_HOST_CLASS_PROVIDER, useClass: HostTokenComponentService}
  ]
})
export class HostDecoratorComponent {

  constructor() {
  }

}

自定義一個子組件，我們會把該組件放在<ng-content>對應的內(nèi)容里面

import {Component, Host, Inject} from '@angular/core';
import {HostComponentService} from './host-component.service';
import {TOKEN_HOST_CLASS_PROVIDER} from '../parameter-decorator-constant';
import {HostTokenComponentService} from './host-token-component.service';

@Component({
  selector: 'app-host-decorator-child',
  template: `
    <p>ng-content對應的內(nèi)容</p>
  `
})
export class HostDecoratorChildComponent {

  constructor(@Host() private componentService: HostComponentService,
              @Host() @Inject(TOKEN_HOST_CLASS_PROVIDER) private tokenService: HostTokenComponentService) {
  }

}

<app-host-decorator>
  <app-host-decorator-child></app-host-decorator-child>
</app-host-decorator>

? ? ? ?@Host也可以和@Optional一起使用．

? ? ? ?關于Angular裝飾器咱們就扯這么一些．主要是也為了讓大家在使用這些裝飾器的時候心里有個底．不同的場景用不同的裝飾器．如果大家在使用過程中有什么疑問鲜棠，可以留言．能力范圍內(nèi)盡量會解答的．　最好給出文章中的一些驗證代碼地址　https://github.com/tuacy/angular-decorator