這篇文章主要介紹了angular10組件的示例分析，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

公司主營(yíng)業(yè)務(wù)：成都網(wǎng)站制作、成都做網(wǎng)站、移動(dòng)網(wǎng)站開(kāi)發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競(jìng)爭(zhēng)能力。創(chuàng)新互聯(lián)公司是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開(kāi)放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對(duì)我們的高要求，感謝他們從不同領(lǐng)域給我們帶來(lái)的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶帶來(lái)驚喜。創(chuàng)新互聯(lián)公司推出沾益免費(fèi)做網(wǎng)站回饋大家。

組件構(gòu)成要素

• html模板

• typescript，定義行為

• css組，可以引入多個(gè)css文件，因此可以在一個(gè)組件里面定義多個(gè)css文件

//從angular主模塊中引入Component(組件裝飾器或組件注解)
import { Component } from '@angular/core';

//裝飾器中以json的形式聲明元數(shù)據(jù)
@Component({
  //它指定了一個(gè)叫  的元素。 該元素是 index.html 文件里的一個(gè)占位符
  //為什么這個(gè)組件跟入口index建立了聯(lián)系呢？因?yàn)槿肟趍ain.ts中綁定了主模塊為appModule
  selector: 'app-root',   //在模板中找對(duì)應(yīng)的標(biāo)簽，找到后創(chuàng)建并插入該組件實(shí)例
  templateUrl: './app.component.html',  // html模板
  styleUrls: ['./app.component.css'],   // css樣式，可以引入多個(gè)css文件
  // 這個(gè)屬性（內(nèi)聯(lián)模板）和templateUrl（外聯(lián)模板）二選一，template后面可以直接跟html字符串
  // 注意在模板語(yǔ)法（反引號(hào)）中是使用插值表達(dá)式，不能使用${}插入值
  template: `
{{title}}
`   
})
//組件控制器，寫邏輯代碼的地方
export class AppComponent {
  title = 'myAngular';
  //構(gòu)造函數(shù)可以用來(lái)進(jìn)行屬性的聲明和初始化語(yǔ)句
  //在angular里面有個(gè)特別重要的點(diǎn)要記?。褐荒芡ㄟ^(guò)構(gòu)造函數(shù)注入依賴
  constructor() {}
}

先決條件

• 安裝 Angular CLI （npm install -g @angular/cli）

• 建立一個(gè) Angular 項(xiàng)目 (ng new )

如果不滿足這兩個(gè)條件，請(qǐng)參考 搭建環(huán)境。

如何創(chuàng)建一個(gè)組件

使用 Angular CLI 創(chuàng)建一個(gè)組件

ng generate component  // 創(chuàng)建一個(gè)組件

ng g c  // 縮寫

常用的創(chuàng)建組件的一些其他選項(xiàng)

ng g c   --skip-tests // 創(chuàng)建一個(gè)組件，且不用安裝測(cè)試文件

ng g c  --inline-style // 縮寫-s，內(nèi)聯(lián)樣式

ng g c  --inline-template // 縮寫-t，內(nèi)聯(lián)模板

ng g c  --module=  // 指定創(chuàng)建的組件在哪個(gè)模塊引用，在多個(gè)模塊的項(xiàng)目中會(huì)用到

除了通過(guò)angular cli自動(dòng)生成組件外，也可以手動(dòng)創(chuàng)建組件（不推薦），這里不介紹。

組件的生命周期（高階內(nèi)容，掌握ngOnInit、ngOnDestroy、ngOnChanges、ngAfterViewInit()）

在工作中經(jīng)常能夠用到的生命周期就兩個(gè)（ngOninit和ngOnDestroy），其他的生命周期很少用到；但是如果能夠掌握組件的生命周期，對(duì)angular會(huì)掌握的得更加深刻。

生命周期含義

當(dāng) Angular 實(shí)例化組件類并渲染組件視圖及其子視圖時(shí)，組件實(shí)例的生命周期就開(kāi)始了。生命周期一直伴隨著變更檢測(cè)，Angular 會(huì)檢查數(shù)據(jù)綁定屬性何時(shí)發(fā)生變化，并按需更新視圖和組件實(shí)例。當(dāng) Angular 銷毀組件實(shí)例并從 DOM 中移除它渲染的模板時(shí)，生命周期就結(jié)束了。當(dāng) Angular 在執(zhí)行過(guò)程中創(chuàng)建、更新和銷毀實(shí)例時(shí)，指令就有了類似的生命周期。

應(yīng)用：

你的應(yīng)用可以使用生命周期鉤子方法來(lái)觸發(fā)組件或指令生命周期中的關(guān)鍵事件，以初始化新實(shí)例，需要時(shí)啟動(dòng)變更檢測(cè)，在變更檢測(cè)過(guò)程中響應(yīng)更新，并在刪除實(shí)例之前進(jìn)行清理。

如何實(shí)現(xiàn)生命周期事件

每個(gè)組件或指令都可以實(shí)現(xiàn)一個(gè)或多個(gè)生命周期鉤子，這些生命周期鉤子可以在適當(dāng)?shù)臅r(shí)候?qū)M件或指令實(shí)例進(jìn)行操作。

每個(gè)接口都有唯一的一個(gè)鉤子方法，它們的名字是由接口名再加上 ng 前綴構(gòu)成的。比如，OnInit 接口的鉤子方法叫做 ngOnInit()。如果你在組件或指令類中實(shí)現(xiàn)了這個(gè)方法，Angular 就會(huì)在首次檢查完組件或指令的輸入屬性后，緊接著調(diào)用它

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

@Component({
  selector: 'app-root',
  styleUrls: ['./app.component.css'],  
  template: `
{{title}}
`   
})
// 實(shí)現(xiàn)OnInit生命周期，可以實(shí)現(xiàn)多個(gè)生命周期
export class AppComponent implements OnInit{ 
  title = 'myAngular';
  constructor() {}
  ngOnInit(){
      console.log("Angular在首次檢查完組件的輸入屬性后，然后調(diào)用它，只調(diào)用一次")
  }
}

生命周期概覽

重點(diǎn)生命周期詳解

初始化組件和指令 ngOnInit

• 在構(gòu)造函數(shù)外部執(zhí)行復(fù)雜的初始化。組件的構(gòu)造應(yīng)該既便宜又安全。比如，你不應(yīng)該在組件構(gòu)造函數(shù)中獲取數(shù)據(jù)。當(dāng)在測(cè)試中創(chuàng)建組件時(shí)或者決定顯示它之前，你不應(yīng)該擔(dān)心新組件會(huì)嘗試聯(lián)系遠(yuǎn)程服務(wù)器。ngOnInit() 是組件獲取初始數(shù)據(jù)的好地方。

• 在 Angular 設(shè)置好輸入屬性之后設(shè)置組件。構(gòu)造函數(shù)應(yīng)該只把初始局部變量設(shè)置為簡(jiǎn)單的值。請(qǐng)記住，只有在構(gòu)造完成之后才會(huì)設(shè)置指令的數(shù)據(jù)綁定輸入屬性。如果要根據(jù)這些屬性對(duì)指令進(jìn)行初始化，請(qǐng)?jiān)谶\(yùn)行 ngOnInit() 時(shí)設(shè)置它們

在實(shí)例銷毀時(shí)進(jìn)行清理 ngOnDestroy

這里是釋放資源的地方，這些資源不會(huì)自動(dòng)被垃圾回收。如果你不這樣做，就存在內(nèi)存泄漏的風(fēng)險(xiǎn)。

• 取消訂閱可觀察對(duì)象和 DOM 事件。

• 停止 interval 計(jì)時(shí)器。

• 反注冊(cè)該指令在全局或應(yīng)用服務(wù)中注冊(cè)過(guò)的所有回調(diào)。

• ngOnDestroy() 方法也可以用來(lái)通知應(yīng)用程序的其它部分，該組件即將消失

頁(yè)面埋點(diǎn)

可以在組件中通過(guò)ngOnInit和ngOnDestroy方法統(tǒng)計(jì)頁(yè)面的時(shí)長(zhǎng)，

更好的做法可以通過(guò)指令實(shí)現(xiàn)ngOnInit和ngOnDestroy生命周期，用來(lái)統(tǒng)計(jì)頁(yè)面時(shí)長(zhǎng)

也可以通過(guò)路由守衛(wèi)來(lái)記錄頁(yè)面出入棧所需要的時(shí)間

@Directive({selector: '[appSpy]'})
export class SpyDirective implements OnInit, OnDestroy {

  constructor(private logger: LoggerService) { }

  ngOnInit()    { this.logIt(`onInit`); }

  ngOnDestroy() { this.logIt(`onDestroy`); }

  private logIt(msg: string) {
    this.logger.log(`Spy #${nextId++} ${msg}`);
  }
}

使用變更檢測(cè)鉤子 ngOnchanges

一旦檢測(cè)到該組件或指令的輸入屬性發(fā)生了變化，Angular 就會(huì)調(diào)用它的 ngOnChanges() 方法。

因?yàn)檫@個(gè)方法會(huì)頻繁執(zhí)行，所以要注意判斷的計(jì)算量，會(huì)影響性能。

// 可以監(jiān)聽(tīng)輸入屬性的變化
ngOnChanges(changes: SimpleChanges) {
  for (const propName in changes) {
    const chng = changes[propName];
    const cur  = JSON.stringify(chng.currentValue);
    const prev = JSON.stringify(chng.previousValue);
    this.changeLog.push(`${propName}: currentValue = ${cur}, previousValue = ${prev}`);
  }
}

組件之間的通信（重要，必須掌握）

一、父子組件的通信（基礎(chǔ)）

父?jìng)髯?/strong>

1、父組件通過(guò)屬性綁定向子組件傳值

import { Component } from '@angular/core';
@Component({
  selector: 'app-parent',
  template: `
    
  `
})
export class ParentComponent {
  msg = '父組件傳的值';
}

2、子組件通過(guò)@Input接收數(shù)據(jù)

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

@Component({
  selector: 'app-child',
  template: `
    
{{msg}}
  `
})
export class ChildComponent {
  @Input() msg: String;
}

子傳父

1、子組件通過(guò)自定義事件，向父組件發(fā)送數(shù)據(jù)

import { Component, Input, EventEmitter, Output} from '@angular/core';
,
@Component({
  selector: 'app-child',
  template: `
    
{{msg}}
    發(fā)送
  `
})
export class ChildComponent {
  @Input() msg: String;
  @Output() voted = new EventEmitter();
  
  vote() {
    this.voted.emit("子組件傳的值");
  }
}

2、父組件通過(guò)監(jiān)聽(tīng)自定義事件，接收子組件的傳值

import { Component } from '@angular/core';
@Component({
  selector: 'app-parent',
  template: `
    
  `
})
export class ParentComponent {
  msg = '父組件傳的值';
  voted(val){ //監(jiān)聽(tīng)自定義事件的傳值
      console.log(val)
  }
}

子組件怎么監(jiān)聽(tīng)輸入屬性值的變化？（2種方法）

1、可以使用一個(gè)輸入屬性@Input()的 setter，以攔截父組件中值的變化。

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

@Component({
  selector: 'app-child',
  template: '
"{{name}}"
'
})
export class ChildComponent {
  @Input()
  get name(): string { return this._name; }
  set name(name: string) {
    this._name = (name && name.trim()) || '';
  }
  private _name = '';
}

2、通過(guò)ngOnChange()來(lái)截聽(tīng)輸入屬性值的變化

當(dāng)需要監(jiān)視多個(gè)、交互式輸入屬性的時(shí)候，本方法比用屬性的 setter 更合適。

import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';

@Component({
  selector: 'app-version-child',
  template: `
    
Version {{major}}.{{minor}}
    
Change log:
    

      {{change}}
    
  `
})
export class VersionChildComponent implements OnChanges {
  @Input() major: number;
  @Input() minor: number;
  changeLog: string[] = [];

  ngOnChanges(changes: SimpleChanges) { //ngOnchange適合監(jiān)聽(tīng)子組件多個(gè)輸入屬性的變化
    const log: string[] = [];
    for (const propName in changes) {
      const changedProp = changes[propName];
      const to = JSON.stringify(changedProp.currentValue);
      if (changedProp.isFirstChange()) {
        log.push(`Initial value of ${propName} set to ${to}`);
      } else {
        const from = JSON.stringify(changedProp.previousValue);
        log.push(`${propName} changed from ${from} to ${to}`);
      }
    }
    this.changeLog.push(log.join(', '));
  }
}

父組件怎么讀取子組件的屬性和調(diào)用子組件的方法？（2種方法）

1、通過(guò)本地變量代表子組件

父組件不能使用數(shù)據(jù)綁定來(lái)讀取子組件的屬性或調(diào)用子組件的方法。但可以在父組件模板里，新建一個(gè)本地變量來(lái)代表子組件，然后利用這個(gè)變量來(lái)讀取子組件的屬性和調(diào)用子組件的方法，如下例所示。

思考：父組件可以通過(guò)這種方式讀取子組件的私有屬性和私有方法嗎？

父組件

import { Component } from '@angular/core';
import { CountdownTimerComponent } from './countdown-timer.component';

@Component({
  selector: 'app-countdown-parent-lv',
  template: `
  
Countdown to Liftoff (via local variable)
  Start //調(diào)用子組件方法
  Stop
  {{timer.seconds}}