ホームページ > ウェブフロントエンド > jsチュートリアル > Angular 2 の兄弟コンポーネント間で通信するにはどうすればよいですか?

Angular 2 の兄弟コンポーネント間で通信するにはどうすればよいですか?

Linda Hamilton
リリース: 2024-11-14 13:40:02
オリジナル
374 人が閲覧しました

How Can I Communicate Between Sibling Components in 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 = '';
}
ログイン後にコピー

注:

  • 複数のインスタンスの作成を避けるために、共有サービス プロバイダーを親コンポーネントにのみ含めます。
  • サービスを兄弟コンポーネントにインポートして挿入します。
  • インポートを更新しますベータ版よりも上位の Angular 2 バージョンのステートメント。

以上がAngular 2 の兄弟コンポーネント間で通信するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート