Angular組件的交互方式有哪些

這篇文章主要介紹Angular組件的交互方式有哪些，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

Angular 組件交互

組件交互： 組件通訊，讓兩個(gè)或多個(gè)組件之間共享信息。

使用場(chǎng)景： 當(dāng)某個(gè)功能在多個(gè)組件中被使用到時(shí)，可以將該特定的功能封裝在一個(gè)子組件中，在子組件中處理特定的任務(wù)或工作流。

交互方式：

• 方式1：通過(guò)@Input和@Output裝飾器進(jìn)行交互。

• 方式2：通過(guò)服務(wù)進(jìn)行交互。

相關(guān)教程推薦：《angular教程》

把數(shù)據(jù)從父組件傳到子組件

通過(guò)輸入型綁定將數(shù)據(jù)從父組件傳到子組件。
輸入屬性是一個(gè)帶有@Input裝飾器的可設(shè)置屬性。
當(dāng)它通過(guò)屬性綁定的形式被綁定時(shí)，值會(huì)“流入”這個(gè)屬性。

部分代碼示例如下：

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

@Component({
  selector: 'app-selector',
  template: `
    // 模板代碼
  `
})
export class TestComponent {
  @Input() hero: Hero;
  @Input('master') masterName: string;
}

上述例子中包含兩個(gè)輸入型屬性，第二個(gè)@Input為子組件的屬性名masterName指定一個(gè)別名master。

在父組件中引用子組件，部分代碼示例如下：

    <app-hero-child *ngFor="let hero of heroes"
      [hero] = "hero"
      [master] = "master">
    </app-hero-child>

監(jiān)聽(tīng)輸入屬性值的變化

(1) 使用setter方法

使用一個(gè)輸入屬性的setter()方法，已攔截父組件中值的變化，并采取行動(dòng)。

部分代碼示例如下：

export class TestComponent {
	
	@Input()
	set name(name: String) {
		// 邏輯處理
	}
}

(2) 使用ngOnChanges()方法

使用OnChanges生命周期鉤子接口的ngOnChanges()方法來(lái)監(jiān)聽(tīng)輸入屬性值的變化并做出回應(yīng)。
注： 當(dāng)需要監(jiān)視多個(gè)、交互式輸入屬性時(shí)，本方法比用屬性的setter方法更合適。

在子組件中從@angular/core導(dǎo)入Input、OnChanges和SimpleChange

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

@Component({
  selector: 'app-version-child',
  template: `
  // 模板代碼
  `
})
export class ChildComponent implements OnChanges {
  @Input() major: number;
  @Input() minor: number;

  ngOnChanges(changes: { [propKey: string]: SimpleChange }) {
    for (let propName in changes) {
      // propName為輸入屬性的名字
      let changedProp = changes[propName]; // changedProp為SimpleChange對(duì)象
      // 其它代碼
    }
  }
}

SimpleChange類(lèi)源代碼如下：

/**
 * Represents a basic change from a previous to a new value for a single
 * property on a directive instance. Passed as a value in a
 * {@link SimpleChanges} object to the `ngOnChanges` hook.
 *
 * @see `OnChanges`
 *
 * @publicApi
 */
export declare class SimpleChange {
    previousValue: any;
    currentValue: any;
    firstChange: boolean;
    constructor(previousValue: any, currentValue: any, firstChange: boolean);
    /**
     * Check whether the new value is the first value assigned.
     */
    isFirstChange(): boolean;
}

父組件監(jiān)聽(tīng)子組件的事件

子組件暴露一個(gè) EventEmitter 屬性，當(dāng)事件發(fā)生時(shí)，子組件利用該屬性 emits(向上彈射)事件。父組件綁定到這個(gè)事件屬性，并在事件發(fā)生時(shí)作出回應(yīng)。
子組件的 EventEmitter 屬性是一個(gè)輸出屬性，通常帶有@Output裝飾器。

—— Angular 組件之間的交互

父組件和子組件通過(guò)服務(wù)進(jìn)行通訊

父組件和它的子組件共享同一個(gè)服務(wù)，利用該服務(wù)在組件家族內(nèi)部實(shí)現(xiàn)雙向通訊。

該服務(wù)實(shí)例的作用域被限制在父組件和其子組件內(nèi)。這個(gè)組件子樹(shù)之外的組件將無(wú)法訪(fǎng)問(wèn)該服務(wù)或者與它們通訊。

以上是“Angular組件的交互方式有哪些”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！