【Angular】02元件生命周期與互動

子產品元件的特征在于用于執行單個任務的代碼塊。 可從代碼(類)中導出值。 Angular應用程式被稱為子產品，并使用許多子產品建構您的應用程式。 Angular 的基本建構塊是可以從子產品導出的元件類。

export class AppComponent {
  title = 'STAngular';
}      

元件是擁有模闆的控制器類，主要處理頁面上的應用程式和邏輯的視圖。 元件可以擁有獨立的樣式。

注冊元件，使用 @Component 注釋，可以将應用程式拆分為更小的部分。

1、建立元件

使用ng指令​

​ng generate component <component-name>​

​​建立的元件會自動生成在​

​app.module​

​中的引用，推薦使用ng指令生成元件

//快速建立      

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

@Component最常用的幾個選項:

selector：這個 CSS 選擇器用于在模闆中标記出該指令，并觸發該指令的執行個體化。

template：元件的内聯模闆

templateUrl：元件模闆檔案的 URL

styleUrls：元件樣式檔案

styles：元件内聯樣式

2、元件生命周期

鈎子方法	用途	時機
​ ​ngOnChanges()​ ​	當 Angular 設定或重新設定資料綁定的輸入屬性時響應。 該方法接受目前和上一屬性值的 ​ ​SimpleChanges​ ​ 對象注意，這發生的非常頻繁，是以你在這裡執行的任何操作都會顯著影響性能。	在 ​ ​ngOnInit()​ ​​ 之前以及所綁定的一個或多個輸入屬性的值發生變化時都會調用。注意，如果你的元件沒有輸入，或者你使用它時沒有提供任何輸入，那麼架構就不會調用 ​ ​ngOnChanges()​ ​。
​ ​ngOnInit()​ ​	在 Angular 第一次顯示資料綁定和設定指令/元件的輸入屬性之後，初始化指令/元件。	在第一輪 ​ ​ngOnChanges()​ ​ 完成之後調用，隻調用一次。
​ ​ngDoCheck()​ ​	檢測，并在發生 Angular 無法或不願意自己檢測的變化時作出反應。	緊跟在每次執行變更檢測時的 ​ ​ngOnChanges()​ ​​ 和 首次執行變更檢測時的 ​ ​ngOnInit()​ ​ 後調用。
​ ​ngAfterContentInit()​ ​	當 Angular 把外部内容投影進元件視圖或指令所在的視圖之後調用。	第一次 ​ ​ngDoCheck()​ ​ 之後調用，隻調用一次。
​ ​ngAfterContentChecked()​ ​	每當 Angular 檢查完被投影到元件或指令中的内容之後調用	​ ​ngAfterContentInit()​ ​​ 和每次 ​ ​ngDoCheck()​ ​ 之後調用
​ ​ngAfterViewInit()​ ​	當 Angular 初始化完元件視圖及其子視圖或包含該指令的視圖之後調用	第一次 ​ ​ngAfterContentChecked()​ ​ 之後調用，隻調用一次。
​ ​ngAfterViewChecked()​ ​	每當 Angular 做完元件視圖和子視圖或包含該指令的視圖的變更檢測之後調用。	​ ​ngAfterViewInit()​ ​​ 和每次 ​ ​ngAfterContentChecked()​ ​ 之後調用。
​ ​ngOnDestroy()​ ​	每當 Angular 每次銷毀指令/元件之前調用并清掃。 在這兒反訂閱可觀察對象和分離事件處理器，以防記憶體洩漏	在 Angular 銷毀指令或元件之前立即調用。

3、元件互動

3.1 @Input

父元件通過​

​@Input​

​給子元件綁定屬性設定輸入類資料

//父元件
<app-stlogin [name]="'Tom'"></app-stlogin>
<app-stlogin ></app-stlogin>
    
//子元件
//ts檔案
import { Component, Input } from '@angular/core';
@Input()
name!: String
//html檔案
<p>{{name}} works!</p>      

3.2 @Output

//子元件
import { Component, Output,EventEmitter } from '@angular/core';
@Output()
outLogin = new EventEmitter()
handlerOutLogin(){
  this.outLogin.emit('使用者退出')
}

<button (click)="handlerOutLogin()">退出</button>
//父元件
<app-sthome (outLogin)="handleOutLogin($event)"></app-sthome>
handleOutLogin(str:) { 
  console.log(str)
}      

3.3 @ViewChild()

<app-sthome [name]="'Tom'" (outLogin)="handleOutLogin($event)" #myHome></app-sthome>
import { Component, OnInit, ViewChild} from '@angular/core';
@ViewChild('myHome')
home: any;

handleOutLogin(str:) { 
  console.log(str)
  console.log(this.home);
  console.log(this.home.name);
}