Angular 從入坑到挖坑 - 組件食用指南

Overview

angular 入坑記錄的筆記第二篇，介紹組件中的相關概念，以及如何在 angular 中經過使用組件來完成系統功能的實現。

對應官方文檔地址：

• 顯示數據
• 模板語法
• 用戶輸入
• 組件之間的交互
• 管道
• 生命週期鉤子

配套代碼地址：angular-practice/src/components-guide

Contents

1. Angular 從入坑到棄坑 - Angular 使用入門
2. Angular 從入坑到挖坑 - 組件食用指南

Knowledge Graph

Step by Step

組件與模板

組件的基礎概念

組件包含了一組特定的功能，每一個組件的功能都單一且獨立，能夠進行重複使用；組件能夠經過 angular cli 進行建立，生成的組件位於工做空間的 src/app/ 路徑下面

## 建立一個 product-list 組件
ng g component product-list
複製代碼

當須要將組件放置在某個指定的目錄下時，能夠直接在 ng g 命令中添加路徑

## 將 hero 組件生成到 components 路徑下
ng g component components/hero
複製代碼

angular 應用就是經過一個個的組件所構成的組件樹，一個組件包含了以下的四個部分

• product-list.component.ts：組件類，用來處理數據和功能，爲視圖呈現提供支持
• product-list.component.html：組件對應的頁面 HTML 模板，用來呈現組件的功能
• product-list.component.scss：只針對當前組件的樣式
• product-list.component.spec.ts：當前組件的單元測試文件（非必須）

當經過命令行建立一個新的組件以後，會自動將新建立的組件註冊到應用的根模塊（app.module.ts）中

在組件類中，經過使用 @Component 裝飾器 ^[1] 用來將類聲明爲組件類，併爲這個組件類配置一些元數據 ^[2]，以決定該組件在運行期間該如何處理、實例化和使用

裝飾器中存在三個基礎的配置參數，用來完成組件與視圖之間的關聯

• selector：選擇器，當咱們在頁面上添加了這個選擇器指定的標籤（<app-product-list></app-product-list>）後，就會在當前使用位置上建立並插入這個組件的一個實例
• templateUrl：該組件所對應的 HTML 模板文件地址
• styleUrls：該組件視圖所特有的 css 樣式文件地址

當須要使用這個組件時，直接在頁面上添加選擇器對應的標籤就能夠了

模板綁定語法

在 angular 應用中，組件扮演着控制器或是視圖模型的做用，在建立組件時會關聯一個 html 文件，這個 html 文件則是一個基礎的 angular 模板文件

在這個模板文件中，能夠經過 angular 內置的模板語法與 html 元素進行結合，從而告訴 angular 如何根據咱們的應用邏輯和數據來渲染頁面

插值表達式

插值表達式能夠將組件中的屬性值或者是模板上的數據經過模板表達式運算符進行計算，最終將值渲染到視圖頁面上

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-product-list',
  templateUrl: './product-list.component.html',
  styleUrls: ['./product-list.component.scss']
})

export class ProductListComponent implements OnInit {

  public title = '我是 title 屬性值';

  constructor() { }

  ngOnInit(): void {
  }
}
複製代碼

<p>title：{{title}}</p>

<p>1+2+3+4+5={{1+2+3+4+5}}</p>
複製代碼

模板表達式的變量來源

• 模板自己的變量
• 指令的上下文變量
• 組件的成員信息（屬性 or 方法）

在使用模板表達式時，若是變量名在多個來源中都存在的話，則模板變量是最優先的，其次是指令的上下文變量，最後是組件的成員

在使用模板表達式時應該遵循以下的原則

• 簡單：正常狀況下，應該將業務邏輯或是數據運算放到組件中，模板表達式只做爲屬性或方法的調用
• 快速執行：模板表達式得出的數據應該快速結束，不然就會對於用戶體驗形成影響
• 沒有可見的反作用：模板表達式只做爲數據的展現，不該該改變任何的數據；應該構建出冪等的表達式，除非依賴的值發生變化，不然屢次調用時，應該返回相同的數據信息

模板綁定語法

經過數據綁定機制，將數據源與視圖進行綁定，從而實現源數據與用戶呈現的一致性

• 從數據源到視圖：插值、組件中的屬性、dom 元素的 property ^[3]、css 樣式、css 類
• 從視圖到數據源：事件
• 視圖與數據源之間的雙向綁定：數據對象

分類	語法
單向 從數據源到視圖	一、插值表達式：{{expression}} 二、使用 [] 進行綁定：<a [href]='expression'></a> 三、使用 bind 進行綁定：<a bind-href='expression'></a>
單向 從視圖到數據源	一、使用 () 進行綁定：<a (click)='statement'></a> 二、使用 on 進行綁定：<a on-click='statement'></a>
雙向 視圖到數據源；數據源到視圖	一、使用 [()] 進行綁定：<input type="text" [(ngModel)]="product.Name"> 二、使用 bindon 進行綁定：<input type="text" bindon-ngModel="product.Name">

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-product-list',
  templateUrl: './product-list.component.html',
  styleUrls: ['./product-list.component.scss']
})

export class ProductListComponent implements OnInit {

  public title = '我是 title 屬性值';
    
  public styleProperty = '<b>我是包含 html 標籤的屬性</b>';

  public fontColor = 'red';

  public url = 'https://yuiter.com';

  public name: string;

  constructor() { }

  ngOnInit(): void {
  }

  getUser() {
    alert('111111111');
  }
}
複製代碼

<h3>2.一、從數據源到視圖</h3>

<p>
  <a href='{{url}}'>使用插值表達式進行綁定</a>
</p>
<p>
  <a [href]='url' [style.color]='fontColor'>使用 [] 進行綁定</a>
</p>
<p>
  <a bind-href='url'>使用 bind 進行綁定</a>
</p>
<p>
  <span [innerHtml]="styleProperty"></span>
</p>

<h3>2.二、從視圖到數據源</h3>

<p>
  <button (click)="getUser()">使用 () 進行綁定</button>
</p>
<p>
  <button on-click="getUser()">使用 on 進行綁定</button>
</p>

<h3>2.三、數據雙向綁定 --- 須要在 AppModule 中添加對於 FormsModule 的引用</h3>

<p>
  <input type="text" id="userName" [(ngModel)]="name">
</p>
<p>
  <input type="text" bindon-ngModel="name">
</p>
複製代碼

數據綁定

• 單向數據綁定

  <p>{{title}}</p>
  複製代碼

• 雙向數據綁定

  <input type="text" id="userName" [(ngModel)]="name">
  
  <!-- 當沒有 NgModel 時，雙向數據綁定等同於下面的寫法 -->
  <input type="text" id="userName" [value]="name" (input)="name=$event.target.value">
  複製代碼

屬性、樣式綁定

• dom 元素的 property 綁定

  <img [src]="productImageUrl">
  
  <img bind-src="productImageUrl">
  複製代碼

• html 標籤的 attribute 綁定

  attribute 綁定的語法相似於 property 綁定，由前綴 attr、點（ . ）和 attribute 名稱組成

  attribute 綁定的主要用例之一是設置 ARIA attribute（給殘障人士提供便利）

  <button [attr.aria-label]="actionName">{{actionName}} with Aria</button>
  複製代碼

• style 內聯樣式綁定

  // 一、[style.width]="width" ：string | undefined | null
  public width = "100px";
  
  //二、[style.width.px]="width"：number | undefined | null
  public width = "20";
  
  // 三、[style]="styleExpr"：string
  public styleExpr = "width: 100px; color:red";
  
  // 四、[style]="styleExpr"：{key:value}
  public styleExpr = {width: '100px', height: '100px'};
  
  // 五、[style]="styleExpr"：array
  public styleExpr = ["width", "100px"];
  複製代碼

• class 屬性綁定

  // 一、[class.foo]="hasFoo"：bool | undefined | null
  public hasFoo = true;
  
  // 二、[class]="classExpr"：string
  public classExpr = "my-class1 my-class2";
  
  // 三、[class]="classExpr"：{key:value}
  public classExpr= {my-class1:  true, my-class2: true};
  
  // 四、[class]="classExpr"：array
  public classExpr= ["my-class1", "my-class2"];
  複製代碼

事件綁定

在事件綁定中，能夠經過 $event 參數獲取到 dom 事件對象的屬性從而獲取到模板信息

<input type="text" (keyup)="getMsg($event)">
<p>輸入的值：{{msg}}</p>
複製代碼

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-product-list',
  templateUrl: './product-list.component.html',
  styleUrls: ['./product-list.component.scss']
})

export class ProductListComponent implements OnInit {

  public msg: string;
  
  constructor() { }

  ngOnInit(): void {
  }

  getMsg(event: KeyboardEvent) {
    console.log(event);
    this.msg = (event.target as HTMLInputElement).value;
  }
}
複製代碼

經過使用 $event 做爲方法的參數會將許多用不到的模板信息傳遞到組件中，致使咱們在僅僅是爲了獲取數據的前提下，卻須要對於頁面元素十分了解，違背了模板（用戶所能看到的）與組件（應用如何去處理用戶數據）之間的關注點分類的原則。所以，這裏應該使用模板引用變量的方式獲取數據信息。

模板引用變量是對模板中 DOM 元素的引用，提供了從模塊中直接訪問元素的能力。

<input type="text" #refMsgInput (keyup)="getRefMsg(refMsgInput.value)">
<p>經過模板引入變量的方式獲取到輸入的值：{{refMsg}}</p>
複製代碼

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-product-list',
  templateUrl: './product-list.component.html',
  styleUrls: ['./product-list.component.scss']
})

export class ProductListComponent implements OnInit {

  public refMsg: string;

  constructor() { }

  ngOnInit(): void {
  }

  getRefMes(msg: string) {
    this.refMsg = msg;
  }
}
複製代碼

模板引用變量的做用域是整個模板，所以要確保一個模板中的引用變量名稱是惟一的，同時，在聲明引用變量時，也可使用 ref- 代替 #

<input type="text" ref-refMsgInput (keyup)="getRefMsg(refMsgInput.value)">
<p>經過模板引入變量的方式獲取到輸入的值：{{refMsg}}</p>
複製代碼

指令

屬性型指令

屬性型指令被應用在視圖 dom 元素上，用來改變 dom 元素的外觀或行爲

• NgClass：用來設置元素的多個 css 類屬性，若是隻設置一個 css 類，應該使用模板綁定語法中 class 類綁定

  <p [ngClass]="inlineStyle">NgClass 屬性指令</p>
  複製代碼

  import { Component, OnInit } from '@angular/core';
  
  @Component({
    selector: 'app-product-list',
    templateUrl: './product-list.component.html',
    styleUrls: ['./product-list.component.scss']
  })
  
  export class ProductListComponent implements OnInit {
  
    public inlineStyle: {};
  
    constructor() { }
  
    ngOnInit(): void {
      this.setInlineStyle();
    }
  
    setInlineStyle() {
      this.inlineStyle = {
        'text-red': true,
        'bg-blue': false,
      };
    }
  }
  複製代碼

  這裏的 text-red、bg-blue 都是 css 類名，若是想要在指定的元素上添加該類，則 css 類名對應的值爲 true，反之則爲 false

• NgStyle：用來設置元素的多個內聯樣式，若是隻設置一個內聯樣式，應該使用模板綁定語法中的樣式綁定

  <p [ngStyle]="currentStyles">NgStyle 屬性指令</p>
  複製代碼

  import { Component, OnInit } from '@angular/core';
  
  @Component({
    selector: 'app-product-list',
    templateUrl: './product-list.component.html',
    styleUrls: ['./product-list.component.scss']
  })
  
  export class ProductListComponent implements OnInit {
  
    public currentStyles: {};
  
    constructor() { }
  
    ngOnInit(): void {
      this.setCurrentStyles();
    }
  
    setCurrentStyles() {
      this.currentStyles = {
        'font-style': 'italic',
        'font-weight': 'bold',
        'font-size': '24px'
      };
    }
  }
  複製代碼

  經過在組件的屬性中設置多個內聯樣式對象的形式，完成對於頁面元素樣式的批量設置

• NgModel：雙向數據綁定

  <input type="text" id="userName" [(ngModel)]="name">
  複製代碼

  

結構型指令

結構型指令用來操做 dom 樹，經過進行一些的邏輯判斷，從而完成對於頁面佈局的修改

• NgIf：根據表達式的值（true or false）來建立或者銷燬 dom 元素

  <p *ngIf="expr">NgIf 結構型指令</p>
  複製代碼

  當 expr 屬性爲 true 時，這個元素則會顯示在頁面上，當屬性值爲 false 時，則不顯示該元素

  ngIf 指令並非經過使用 css 樣式來隱藏元素的，當值爲 false 時，則這些元素會從 dom 中被銷燬，而且全部監聽該 dom 元素的事件會被取消，當從新顯示該元素時，會從新執行初始化的過程

  與銷燬元素不一樣，對於隱藏的元素來講，全部的元素監聽事件還會執行監聽的，再次顯示時不用從新進行初始化過程

• NgFor：經過定義單條數據的顯示格式，angular 以此爲模板，循環渲染出全部的數據

  <p *ngFor="let item of products; let i = index">{{i+1}} - {{item.name}} --- {{item.price}}</p>
  複製代碼

  import { Component, OnInit } from '@angular/core';
  
  @Component({
    selector: 'app-product-list',
    templateUrl: './product-list.component.html',
    styleUrls: ['./product-list.component.scss']
  })
  
  export class ProductListComponent implements OnInit {
  
    public products = [{
      'name': 'lalala',
      'price': '$200'
    }, {
      'name': 'hehehe',
      'price': '$400'
    }, {
      'name': 'wuwuwu',
      'price': '$120'
    }, {
      'name': 'xixi',
      'price': '$570'
    }];
  
    constructor() { }
  
    ngOnInit(): void {
    }
  }
  複製代碼

  NgFor 指令上下文中的 index 屬性在每次迭代中，會獲取到條數據的索引值

  當渲染的數據發生改變時 ^[4]，會致使 dom 元素的從新渲染，此時能夠採用 trackBy 的方式，經過在組件中添加一個方法，指定循環須要跟蹤的屬性值，此時當渲染的數據發生改變時，只會從新渲染變動了指定的屬性值的數據

  <p>不使用 trackBy 跟蹤屬性</p>
  <div>
    <p *ngFor="let item of products; let i = index;">
      {{i+1}} - {{item.name}} --- {{item.price}}
    </p>
  </div>
  <p>使用 trackBy 跟蹤屬性</p>
  <div>
    <p *ngFor="let item of products; let i = index; trackBy: trackByIndex">
      {{i+1}} - {{item.name}} --- {{item.price}}
    </p>
  </div>
  <button (click)="addProduct()">新增</button>
  複製代碼

  import { Component, OnInit } from '@angular/core';
  
  @Component({
    selector: 'app-product-list',
    templateUrl: './product-list.component.html',
    styleUrls: ['./product-list.component.scss']
  })
  
  export class ProductListComponent implements OnInit {
  
    public products = [{
      'name': 'lalala',
      'price': '$200'
    }, {
      'name': 'hehehe',
      'price': '$400'
    }, {
      'name': 'wuwuwu',
      'price': '$120'
    }, {
      'name': 'xixi',
      'price': '$570'
    }];
  
    constructor() { }
  
    ngOnInit(): void {
    }
  
    trackByIndex(index: number, item: any): string {
      return item.price;
    }
  
    addProduct() {
      this.products = [{
        'name': 'lalala',
        'price': '$200'
      }, {
        'name': 'hehehe',
        'price': '$400'
      }, {
        'name': 'wuwuwu',
        'price': '$120'
      }, {
        'name': 'xixi',
        'price': '$570'
      }, {
        'name': 'lululu',
        'price': '$' + (Math.random() * 100).toFixed()
      }];
    }
  }
  複製代碼

  

• NgSwitch：根據條件切換，從候選的幾個元素中選擇匹配的，放到 dom 元素中

  <p>
    請選擇配置
    <select [(ngModel)]="config">
      <option value="">請選擇</option>
      <option value="r7-3700x">AMD Ryzen 7 3700X</option>
      <option value="i5-9400f">Intel i5 9400F</option>
      <option value="i5-9600kf">Intel i5 9600KF</option>
    </select>
  </p>
  <p> 配置描述 </p>
  <div [ngSwitch]="config">
    <p *ngSwitchCase="'r7-3700x'">
      一個能打得都木的~~~
    </p>
    <p *ngSwitchCase="'i5-9400f'">
      擠牙膏的。。。
    </p>
    <p *ngSwitchCase="'i5-9600kf'">
      別看了，我不是開封菜。。。
    </p>
    <p *ngSwitchDefault>
      你選一個啊~~~
    </p>
  </div>
  複製代碼

  import { Component, OnInit } from '@angular/core';
  
  @Component({
    selector: 'app-product-list',
    templateUrl: './product-list.component.html',
    styleUrls: ['./product-list.component.scss']
  })
  
  export class ProductListComponent implements OnInit {
  
    public config = '';
  
    constructor() { }
  
    ngOnInit(): void {
    }
  }
  複製代碼

  

  NgSwitch 自己是一個屬性型指令，它不會直接操做 dom 元素，而是經過它所控制的兩個結構型指令（NgSwitchCase、ngSwitchDefault）來操做 dom 元素

管道

在使用模板表達式綁定數據時，可使用管道對於表達式的結果進行轉換

管道是一種簡單的函數，它們接受輸入值並返回轉換後的值。經過在模板表達式中使用管道運算符（|）則能夠完成相應的結果轉換

模板表達式中的特殊運算符

angular 模板表達式是 javascript 的子集，相對於常見的 javascript 運算符，添加了三個特殊的運算符

• 管道運算符

  管道是一種特殊的函數，能夠把運算符（|）左邊的數據轉換成指望呈現給視圖的數據格式，例如，將時間進行格式化、將數據轉換成 json 字符串的形式等等

  能夠針對一個數據使用多個管道進行串聯，而且管道運算符的優先級比三元運算符（ ?: ）高

  <h3>5.一、管道運算符</h3>
  <div>
    <p>產品信息 json 字符串</p>
    {{products | json}}
  </div>
  複製代碼

  

• 安全導航運算符

  在視圖中使用的屬性值爲 null or undefined 時，javascript 和 angular 會引起空指針異常並中斷視圖的渲染過程， 從而視圖會渲染失敗，而使用了安全導航運算符（?）後，視圖依然會渲染，只是顯示的值爲空白

  <h3>5.二、安全導航運算符</h3>
  <p>第五個專案的名稱爲：{{products[5].name}}</p>
  複製代碼

  

  <p>第五個專案的名稱爲：{{products[5]?.name}}</p>
  複製代碼

  

• 非空斷言運算符

  在 tsconfig.json 中啓用 strictNullChecks 屬性，typescript 將會強制開啓嚴格的空值檢查，在這種模式下，全部定義了類型的屬性是不容許賦值爲 null 的，當將屬性賦值爲 null，則會編譯報錯

  

  非空斷言運算符用來告訴編譯器對特定的屬性不作嚴格的空值校驗，當屬性值爲 null or undefined 時，不拋錯誤。在下面的代碼中，在判斷 obj 存在後，就再也不針對 obj.name 進行校驗

  import { Component, OnInit } from '@angular/core';
  
  interface Person {
      name: string;
      age: number;
    }
  
    @Component({
      selector: 'app-product-list',
      templateUrl: './product-list.component.html',
      styleUrls: ['./product-list.component.scss']
    })
  
    export class ProductListComponent implements OnInit {
  
      public obj: Person;     
        
      constructor() {
      }
        
      ngOnInit(): void {
      }
  
    }
  複製代碼

  <p *ngIf="obj">
    <span>{{obj!.name}}</span>
  </p>
  複製代碼

  非空斷言運算符不會防止出現 null 或 undefined，只是不提示

經常使用的管道函數

• 純管道

  只有在它檢測到輸入值發生了純變動時纔會執行，可是會忽略對象內部的變動

  純變動是指對原始類型值（String、Number、Boolean、Symbol）的更改， 或者對對象引用（Date、Array、Function、Object）的更改

• 非純管道

  每一個組件的變動週期都會執行

管道	做用
JsonPipe	將一個值轉換成 json 字符串
DatePipe	根據區域設置規則格式化日期值
UpperCasePipe	把文本轉換成全大寫形式
LowerCasePipe	把文本轉換成全小寫形式

<h3>6.一、json 管道</h3>
<p>{{products | json}}</p>

<h3>6.二、date 管道</h3>
<p>如今時間：{{date | date:'yyyy-MM-dd HH:mm:ss'}}</p>

<h3>6.三、upper 管道</h3>
<p>轉換成全大寫：{{url | uppercase}}</p>

<h3>6.四、lower 管道</h3>
<p>轉換成全小寫：{{url | lowercase}}</p>
複製代碼

組件之間的通訊

輸入屬性與輸出屬性

輸入屬性（@Input）和輸出屬性（@Output）用來在父子組件或指令中進行共享數據。@Input 用來獲取數據，@Output 用來向外發送數據

子組件獲取父組件信息

• 在父組件中，添加對於子組件的引用，並將須要傳遞的數據 or 方法綁定到子組件上

  傳遞數據直接將父組件中的屬性值賦值給綁定在子組件上的屬性就能夠了

  傳遞方法時，綁定在子組件上的屬性是父組件方法的名稱，此處不能加 () ，不然就會直接執行該父組件的方法

  在傳遞數據給子組件時，也能夠經過 this 來指代父組件，從而將整個父組件做爲數據綁定子組件上

  <h2>父組件內容：</h2>
  
  <p>
    <label for="title">標題：</label>
    <input id="title" type="text" [(ngModel)]="title">
  </p>
  
  <hr>
  
  <h2>子組件內容：</h2>
  
  <!-- 將父組件的數據綁定到子組件上 -->
  <app-child-component [parentTitle]="title" [parentGetMsg]='getMsg'></app-child-component>
  複製代碼

  

• 在子組件中引入 Inupt，同時使用 @Input 裝飾器來接收父組件傳遞的數據

  // 引入 Input 接口
  import { Component, OnInit, Input } from '@angular/core';
  
  @Component({
    selector: 'app-child-component',
    templateUrl: './child-component.component.html',
    styleUrls: ['./child-component.component.scss']
  })
  export class ChildComponentComponent implements OnInit {
  
    // 獲取父組件的數據
    @Input() parentGetMsg: any;
  
    // 使用 setter 對父組件的數據進行深加工
    private _title: string;
    @Input()
    set parentTitle(title: string) {
      this._title = (title && title.trim()) || '父組件的 title 屬性值爲空';
    }
    get parentTitle(): string {
      return this._title;
    }
  
    constructor() { }
  
    ngOnInit(): void {
    }
  
    runParentFunc() {
      this.parentGetMsg();
    }
  }
  複製代碼

  <p>父組件的 title 屬性值：{{parentTitle}}</p>
  <p>
    <button (click)="runParentFunc()">調用父組件的方法</button>
  </p>
  複製代碼

  對於使用 @Input 裝飾器獲取到的父組件數據，能夠經過輸入屬性中的 setter 方法中進行從新賦值

  

父組件獲取子組件信息

• 使用 @ViewChild 裝飾器獲取

  在子組件上定義一個模板引用變量

  <h2>父組件內容：</h2>
  
  <h3>一、使用 @ViewChild 裝飾器獲取子組件數據</h3>
  
  <p>
    <button (click)="getChildMsg()">獲取子組件的 msg 數據</button>
  </p>
  
  <p>
    <button (click)="runChildFunc()">調用子組件的方法</button>
  </p>
  
  <hr>
  
  <h2>子組件內容：</h2>
  
  <!-- 在子組件上定義一個模板引用變量 -->
  <app-child-component #childComponent></app-child-component>
  複製代碼

  在父組件中添加對於 ViewChild 的引用，而後使用 @ViewChild 裝飾器來接收子組件的 dom 信息，從而獲取到子組件的數據或方法

  // 引入 ViewChild
  import { Component, OnInit, ViewChild } from '@angular/core';
  
  @Component({
    selector: 'app-parent-component',
    templateUrl: './parent-component.component.html',
    styleUrls: ['./parent-component.component.scss']
  })
  export class ParentComponentComponent implements OnInit {
  
    // 經過 @ViewChild 裝飾器來接收字組件的 dom 信息
    @ViewChild('childComponent') child: any;
  
    constructor() {
    }
  
    ngOnInit(): void {
    }
  
    getMsg() {
      alert('我是父組件的 getMsg 方法');
    }
  
    getChildMsg() {
      alert(this.child.msg);
    }
  }
  複製代碼

  

• 使用 @Output 裝飾器配合 EventEmitter 實現

  在子組件中引入 Output 和 EventEmitter，經過 @Output 裝飾器定義一個事件觸發器，而後就能夠經過這個事件觸發器的 emit 方法進行事件廣播

  // 引入 Output、EventEmitter
  import { Component, OnInit, Output, EventEmitter } from '@angular/core';
  
  @Component({
    selector: 'app-child-component',
    templateUrl: './child-component.component.html',
    styleUrls: ['./child-component.component.scss']
  })
  export class ChildComponentComponent implements OnInit {
  
    public msg = 'child title';
  
    // 定義一個事件觸發器
    @Output() childEmitter = new EventEmitter<string>();
  
    constructor() { }
  
    ngOnInit(): void {
    }
  
    runParentFunc() {
      this.parentGetMsg();
    }
  
    sendMsg() {
      this.childEmitter.emit(this.msg);
    }
  }
  複製代碼

  當子組件進行事件廣播時，就能夠經過在子組件上使用事件綁定的方式綁定到一個父組件事件，經過 $event 獲取到子組件傳遞的數據值

  <h2>父組件內容：</h2>
  
  <h3>二、使用 @Output 裝飾器配合 EventEmitter 獲取子組件數據</h3>
  
  <p>{{childMsg}}</p>
  
  <hr>
  
  <h2>子組件內容：</h2>
  
  <!-- 將子組件的事件廣播綁定到父組件事件上 -->
  <app-child-component (childEmitter)='childEmitMsg($event)'></app-child-component>
  複製代碼

  import { Component, OnInit } from '@angular/core';
  
  @Component({
    selector: 'app-parent-component',
    templateUrl: './parent-component.component.html',
    styleUrls: ['./parent-component.component.scss']
  })
  export class ParentComponentComponent implements OnInit {
  
    public childMsg: string;
  
    constructor() {
    }
  
    ngOnInit(): void {
    }
  
    childEmitMsg(event) {
      this.childMsg = event;
    }
  }
  複製代碼

  

非父子組件之間的通訊

無論組件之間是否具備關聯關係，均可以經過共享一個服務的方式來進行數據交互，也能夠將須要進行共享的數據存儲到一些存儲介質中，經過直接讀取這個存儲介質中的數據進行通訊

• 建立一個服務，並添加到模塊中

  ## 在 services/storage 路徑下建立一個 storage 服務
  ng g service services/storage/storage
  複製代碼

  import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  import { AppRoutingModule } from './app-routing.module';
  import { AppComponent } from './app.component';
  import { ProductListComponent } from './product-list/product-list.component';
  import { FormsModule } from '@angular/forms';
  import { ParentComponentComponent } from './parent-component/parent-component.component';
  import { ChildComponentComponent } from './child-component/child-component.component';
  
  // 引入自定義的服務
  import { StorageService } from './services/storage/storage.service';
  
  @NgModule({
    declarations: [
      AppComponent,
      ProductListComponent,
      ParentComponentComponent,
      ChildComponentComponent
    ],
    imports: [
      BrowserModule,
      AppRoutingModule,
      FormsModule
    ],
    // 配置自定義的服務
    providers: [StorageService],
    bootstrap: [AppComponent]
  })
  
  export class AppModule { }
  複製代碼

  

• 在組件中使用服務

  在須要使用的組件中引入服務，而後在組件的構造函數中經過依賴注入的方式注入這個服務，就能夠在組件中完成對於這個服務的使用

  在父組件中對數據進行賦值，而後調用服務的方法改變數據信息

  import { Component, OnInit } from '@angular/core';
  
  // 引入服務
  import { StorageService } from '../services/storage/storage.service';
  
  @Component({
    selector: 'app-parent-component',
    templateUrl: './parent-component.component.html',
    styleUrls: ['./parent-component.component.scss']
  })
  export class ParentComponentComponent implements OnInit {
  
    public msg = 'this is a service default value writen in parent component';
  
    constructor(private storage: StorageService) {
      this.storage.setMsg(this.msg);
    }
  
    ngOnInit(): void {
    }
  
    submit() {
      this.storage.setMsg(this.msg);
    }
  }
  複製代碼

  <h2>父組件內容：</h2>
  
  <h3>三、經過服務在屬性中共享數據</h3>
  
  <p>
    修改服務中的數據值
    <input type="text" [(ngModel)]="msg">
    <button (click)="submit()">提交</button>
  </p>
  
  <p>服務中的數據：{{msg}}</p>
  
  <hr>
  
  <h2>子組件內容：</h2>
  
  <app-child-component></app-child-component>
  複製代碼

  在子組件中引入服務，從而同步獲取到父組件修改後的服務中的數據信息

  import { Component, OnInit } from '@angular/core';
  
  // 引入服務
  import { StorageService } from '../services/storage/storage.service';
  
  @Component({
    selector: 'app-child-component',
    templateUrl: './child-component.component.html',
    styleUrls: ['./child-component.component.scss']
  })
  export class ChildComponentComponent implements OnInit {
  
    public storageMsg: string;
  
    constructor(private storage: StorageService) {
    }
  
    ngOnInit(): void {
    }
  
    getServiceMsg() {
      this.storageMsg = this.storage.getMsg();
    }
  }
  複製代碼

  <button (click)="getServiceMsg()">獲取服務中的數據值</button>
  <p>
    服務中 msg 屬性值：{{storageMsg}}
  </p>
  複製代碼

  

組件的生命週期鉤子函數

當 angular 在建立、更新、銷燬組件時都會觸發組件的生命週期鉤子函數，經過在組件中實現這些生命週期函數，從而介入到這些關鍵時刻

鉤子函數	觸發時機
ngOnChanges	被綁定的輸入屬性值發生變化時觸發，會調用屢次；若是沒有使用到父子組件傳值，則不會觸發
ngOnInit	初始化組件時會調用一次，通常是用來在構造函數以後執行組件複雜的初始化邏輯
ngDoCheck	只要數據發生改變就會被調用
ngAfterContentInit	組件內容渲染完成後調用一次
ngAfterContentChecked	只要組件的內容發生改變就會被調用
ngAfterViewInit	視圖加載完成後觸發一次，通常用來對視圖的 dom 元素進行操做
ngAfterViewChecked	視圖發生變化時調用，在組件的生命週期中會調用屢次
ngOnDestroy	只在銷燬組件時調用一次，通常用來在組件銷燬前執行某些操做

在組件加載過程當中，會按照上面列出的鉤子函數順序，在組件的構造函數執行以後依次執行，在頁面加載過程當中會涉及綁定數據的操做，所以會再次出發 ngDoCheck、ngAfterContentChecked、ngAfterViewChecked 這三個生命週期鉤子函數。後續只要頁面數據有發生改變，都會觸發這幾個事件

佔坑

        做者：墨墨墨墨小宇
        我的簡介：96年生人，出生於安徽某四線城市，畢業於Top 10000000 院校。.NET程序員，槍手死忠，喵星人。於2016年12月開始.NET程序員生涯，微軟.NET技術的堅決堅持者，立志成爲雲養貓的少年中面向谷歌編程最厲害的.NET程序員。
        我的博客：yuiter.com
        博客園博客：www.cnblogs.com/danvic712

---

1. 裝飾器是一種特殊類型的聲明，它可以被附加到類聲明，方法， 訪問符，屬性或參數上，就像是 C# 中的特性 ↩︎

2. 元數據是用來描述數據的數據項，例如這裏的 selector 是爲了描述 Component 這個數據信息資源中抽取出來用於說明其特徵的一個結構化的數據 ↩︎

3. property 是 dom 元素默認的基本屬性，在 dom 初始化時會被所有建立，而 attribute 是 html 標籤上定義的屬性和值 =》DOM 中 Property 和 Attribute 的區別 ↩︎

4. 這裏的數據改變指的是會將原來的數據對象從新銷燬而後重建的過程，所以像 push、unshift 這樣的方法即便不添加 trackBy 也不會從新渲染整個 DOM，只會從新渲染改變的數據 ↩︎