本篇文章帶大家詳細介紹一下Angular元件互動。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有幫助。
#元件互動： 元件通訊，讓兩個或多個元件之間共享資訊。
使用場景： 當某個功能在多個元件中被使用到時，可以將該特定的功能封裝在一個子元件中，在子元件中處理特定的任務或工作流程。
互動方式：
@Input和@Output裝飾器互動。 服務互動。 【相關推薦：《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>使用一個輸入屬性的setter()方法，已攔截父元件中值的變化，並採取行動。
部分程式碼範例如下：
export class TestComponent {
@Input()
set name(name: String) {
// 逻辑处理
}
}使用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 元件互動相關部分內容
更多程式相關知識，請造訪：程式設計入門！ ！
以上是詳解Angular中的組件交互的詳細內容。更多資訊請關注PHP中文網其他相關文章！
