複数のコンポーネントでの 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.ts

3.parent.component.html

4.池。 ts

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() {

 }
}

5、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>

上記は皆さんのためにまとめたものです。将来皆さんのお役に立てれば幸いです。

関連記事:

軽量JS Cookieプラグインjs-cookieの使い方

p5.jsのピタゴラスツリー実装コード

JSアニメーションタイマーの知識まとめ

以上が複数のコンポーネントでの angular4 共有サービス データ通信の例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。