Angular中組件交互的示例分析

這篇文章將為大家詳細講解有關Angular中組件交互的示例分析，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

Angular 組件交互

組件交互： 組件通訊，讓兩個或多個組件之間共享信息。
使用場景： 當某個功能在多個組件中被使用到時，可以將該特定的功能封裝在一個子組件中，在子組件中處理特定的任務或工作流。
交互方式：

• 方式1：通過@Input和@Output裝飾器進行交互。

• 方式2：通過服務進行交互。

把數據從父組件傳到子組件

通過輸入型綁定將數據從父組件傳到子組件。
輸入屬性是一個帶有@Input裝飾器的可設置屬性。
當它通過屬性綁定的形式被綁定時，值會“流入”這個屬性。

部分代碼示例如下：

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

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

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

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

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

監聽輸入屬性值的變化

(1) 使用setter方法

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

部分代碼示例如下：

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

(2) 使用ngOnChanges()方法

使用OnChanges生命周期鉤子接口的ngOnChanges()方法來監聽輸入屬性值的變化并做出回應。
注： 當需要監視多個、交互式輸入屬性時，本方法比用屬性的setter方法更合適。

在子組件中從@angular/core導入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對象
      // 其它代碼
    }
  }
}

SimpleChange類源代碼如下：

/**
 * 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;
}

父組件監聽子組件的事件

子組件暴露一個 EventEmitter 屬性，當事件發生時，子組件利用該屬性 emits(向上彈射)事件。父組件綁定到這個事件屬性，并在事件發生時作出回應。

子組件的 EventEmitter 屬性是一個輸出屬性，通常帶有@Output裝飾器。

—— Angular 組件之間的交互

父組件和子組件通過服務進行通訊

父組件和它的子組件共享同一個服務，利用該服務在組件家族內部實現雙向通訊。

該服務實例的作用域被限制在父組件和其子組件內。這個組件子樹之外的組件將無法訪問該服務或者與它們通訊。

關于“Angular中組件交互的示例分析”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。