複数のコンポーネントでの angular4 共有サービスデータ通信の例-jsチュートリアル-php.cn

複数のコンポーネントでの angular4 共有サービスデータ通信の例

亚连

リリース： 2018-05-28 10:36:58

オリジナル

1465 人が閲覧しました

この記事では主に、複数のコンポーネントにおける 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>

ログイン後にコピー

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