本篇文章和大家一起聊聊Angular元件的互動方式。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有幫助。
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。
在父元件中引用子元件，部分程式碼範例如下：
#監聽輸入屬性值的變化
(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中文網其他相關文章！
