如何在 Angular 2 中的同級元件之間進行通訊？

Angular 2 同級組件通訊

同級組件無法存取彼此的屬性和方法。本文探討了 Angular 2 中兄弟元件之間利用共享服務進行通訊的簡單機制。

共享服務方法

1。共享服務：

建立共享服務作為通訊中心。

@Injectable()
export class SharedService {
    dataArray: string[] = [];

    insertData(data: string) {
        this.dataArray.unshift(data);
    }
}

2.父元件：

匯入並提供父元件中的共用服務。

import {SharedService} from './shared.service';
@Component({
    selector: 'parent-component',
    template: `<child-component></child-component>
               <child-sibling-component></child-sibling-component>`,
    providers: [SharedService]
})
export class ParentComponent { }

3.子組件：

將共享服務注入到兩個兄弟組件：

子組件1：

import {SharedService} from './shared.service'
@Component({
    selector: 'child-component',
    template: `...`
})
export class ChildComponent implements OnInit {
    data: string[] = [];
    constructor(private _sharedService: SharedService) { }
}

子組件組件2（弟兄姊妹）：

import {SharedService} from './shared.service'
@Component({
    selector: 'child-sibling-component',
    template: `...`
})
export class ChildSiblingComponent {
    data: string = 'Testing data';
    constructor(private _sharedService: SharedService) { }
}

4。資料共享：

同級組件可以修改共享服務的資料數組，這將反映在其他同級組件中。

addData() {
    this._sharedService.insertData(this.data);
    this.data = '';
}

註解：

• 僅在父元件中包含共用服務提供者，以避免建立多個實例。
• 將服務匯入並注入到兄弟元件中。
• 更新匯入高於 beta 的 Angular 2 版本的語句。

以上是如何在 Angular 2 中的同級元件之間進行通訊？的詳細內容。更多資訊請關注PHP中文網其他相關文章！