ホームページ > 記事 > ウェブフロントエンド > Angular4 の複数のコンポーネントが相互にデータを通信する
今回はangular4の複数コンポーネント間での相互データ通信についてお届けします。 angular4の複数コンポーネント間での相互データ通信における注意事項は次のとおりです。
アプリケーション シナリオ: さまざまなコンポーネントで統合されたデータ セットを操作します。どのコンポーネントがデータを操作しても、その効果は他のコンポーネントにすぐに反映されます。このようにして、サービス インスタンスを共有する必要がありますが、これがこの記事の焦点です。異なるインスタンスである場合、同じデータ セットで動作しないため、そのような影響は生じません。共有サービス インスタンスを実現するには、すべての親コンポーネントでプライベート化する必要があります。このコンポーネントは :[] で導入され、サブコンポーネントで再度導入する必要はありません。そうすれば、すべてが親コンポーネントのサービス インスタンスを使用します。
1. 公共サービス
import {Injectable} from "@angular/core"; @Injectable() export class CommonService { public dateList: any = [ { name: "张旭超", age: 20, address: "北京市朝阳区" } ]; constructor() { } addDateFun(data) { this.dateList.push(data); } }
2.parent.component.html
import {Component, OnInit} from "@angular/core"; import {CommonService} from "./common.service"; // 这里要通过父子公用服务来操作数据,只需要在父组件中引入服务。 @Component({ selector: "parent-tag", templateUrl: "parent.component.html", providers: [ CommonService ] }) export class ParentComponent implements OnInit { public list: any = []; constructor(private commonService: CommonService) { this.list = commonService.dateList; } ngOnInit() { } }
4. child-one.component.html
<table width="500"> <tr *ngFor="let item of list"> <td> {{item.name}} </td> <td> {{item.age}} </td> <td> {{item.address}} </td> </tr> </table> <child-one-tag></child-one-tag>この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。
推奨読書:
jQuery 可視性フィルターの使用例の詳細な説明 jQuery コンテンツ フィルター メソッドの使用の詳細な説明
以上がAngular4 の複数のコンポーネントが相互にデータを通信するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。