anguar4 shared service data communication among multiple components

Application scenario: operate the same set of data in different components. No matter which component operates on the data, the effect will be seen immediately in other components. In this way, they will share a service instance, which is the focus of this article. If they are different instances, they will not operate on the same set of data, so there will not be such an effect. If you want to achieve a shared service instance, you need to priviates in all parent components. This component is introduced in :[] and does not need to be introduced again in the sub-component, then they all use the service instance in the parent component.

1. Public service

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

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

    }
}

3. parent.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>

4. child-one .component.ts

import {Component} from "@angular/core";
import {CommonService} from "./common.service";

@Component({
    selector: "child-one-tag",
    templateUrl: "child-one.component.html"
})
export class ChildOneComponent {
    public display: boolean = false;
    public username: string = "";
    public age: number = 20;
    public address: string = "";


    constructor(public commonService: CommonService) {

    }

    showDialog() {
        this.display = true;
    }

    hideDialog() {
        this.display = false;
    }

    addInfoFun() {
        let params = {
            name: this.username,
            age: this.age,
            address: this.address
        };
        this.commonService.addDateFun(params);
        params = {};
    }
}

5、child-one.component.html

<p-dialog header="弹窗" [(visible)]="display" [width]="300" appendTo="body" modal="modal">
    <form #myForm="ngForm" name="myForm">
        <p>姓名：<input type="text" name="username" [(ngModel)]="username" pInputText/></p>
        <p>年龄：<input type="number" name="age" [(ngModel)]="age" pInputText/></p>
        <p>地址：<input type="text" name="address" [(ngModel)]="address" pInputText/></p>
        <button pButton label="确定" type="submit" (click)="addInfoFun()"></button>
        <button pButton label="取消" (click)="hideDialog()"></button>
    </form>
</p-dialog>
<button label="添加" pButton (click)="showDialog()"></button>

# #Application scenario: operate the same set of data in different components. No matter which component operates on the data, the effect will be seen immediately in other components. In this way, they have to share a service instance, which is the focus of this article. If they are different instances, they will not operate on the same set of data, so there will not be such an effect. If you want to realize a shared service instance, you need to priviates in all parent components. This component is introduced in :[] and does not need to be introduced again in the sub-component, then they all use the service instance in the parent component.

1. Public service

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

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

    }
}

3. parent.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>

4. child-one .component.ts

import {Component} from "@angular/core";
import {CommonService} from "./common.service";

@Component({
    selector: "child-one-tag",
    templateUrl: "child-one.component.html"
})
export class ChildOneComponent {
    public display: boolean = false;
    public username: string = "";
    public age: number = 20;
    public address: string = "";


    constructor(public commonService: CommonService) {

    }

    showDialog() {
        this.display = true;
    }

    hideDialog() {
        this.display = false;
    }

    addInfoFun() {
        let params = {
            name: this.username,
            age: this.age,
            address: this.address
        };
        this.commonService.addDateFun(params);
        params = {};
    }
}

5、child-one.component.html

<p-dialog header="弹窗" [(visible)]="display" [width]="300" appendTo="body" modal="modal">
    <form #myForm="ngForm" name="myForm">
        <p>姓名：<input type="text" name="username" [(ngModel)]="username" pInputText/></p>
        <p>年龄：<input type="number" name="age" [(ngModel)]="age" pInputText/></p>
        <p>地址：<input type="text" name="address" [(ngModel)]="address" pInputText/></p>
        <button pButton label="确定" type="submit" (click)="addInfoFun()"></button>
        <button pButton label="取消" (click)="hideDialog()"></button>
    </form>
</p-dialog>
<button label="添加" pButton (click)="showDialog()"></button>

##

The above is the detailed content of anguar4 shared service data communication among multiple components. For more information, please follow other related articles on the PHP Chinese website!