淺談Angular組件的互動方式

本篇文章和大家一起聊聊Angular元件的互動方式。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有幫助。

Angular 元件互動

#元件互動： 元件通訊，讓兩個或多個組件之間共用資訊。

使用場景： 當某個功能在多個元件中使用到時，可以將該特定的功能封裝在一個子元件中，在子元件中處理特定的任務或工作流程。

互動方式：

• 方式1：透過@Input和@Output裝飾器進行互動。
• 方式2：透過服務互動。

相關教學推薦：《angular教學》

---

#把資料從父元件傳到子元件

透過輸入型綁定將資料從父元件傳到子元件。
輸入屬性是一個帶有@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組件的互動方式的詳細內容。更多資訊請關注PHP中文網其他相關文章！