여러 구성 요소 간의 anguar4 공유 서비스 데이터 통신

응용 시나리오: 다양한 구성 요소에서 통합된 데이터 세트를 운영합니다. 어떤 구성 요소가 데이터에 대해 작동하든 효과는 다른 구성 요소에서 즉시 나타납니다. 이런 방식으로 이 기사의 초점인 서비스 인스턴스를 공유해야 합니다. 인스턴스가 다르면 동일한 데이터 세트에서 작동하지 않으므로 원하는 경우 그러한 효과가 없습니다. 공유 서비스 인스턴스를 실현하려면 모든 상위 구성 요소를 비공개해야 합니다. 이 구성 요소는 :[]에 도입되었으며 하위 구성 요소에서 다시 도입할 필요가 없으며 모두 상위 구성 요소의 서비스 인스턴스를 사용합니다.

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

    }
}

4.child-one.comComponent.ts

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

5.

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 = {};
    }
}

응용 시나리오에서는 어떤 구성 요소가 데이터에서 작동하는지에 관계없이 다양한 구성 요소에서 통합된 데이터 세트를 운영하며 그 효과는 다른 구성 요소에서 즉시 나타납니다. 이런 방식으로 이 기사의 초점인 서비스 인스턴스를 공유해야 합니다. 인스턴스가 다르면 동일한 데이터 세트에서 작동하지 않으므로 원하는 경우 그러한 효과가 없습니다. 공유 서비스 인스턴스를 실현하려면 모든 상위 구성 요소를 비공개해야 합니다. 이 구성 요소는 :[]에 도입되었으며 하위 구성 요소에서 다시 도입할 필요가 없으며 모두 상위 구성 요소의 서비스 인스턴스를 사용합니다.

1. 공공 서비스

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

2.parent.comComponent.ts

import {Injectable} from "@angular/core";

@Injectable()
export class CommonService {
    public dateList: any = [
        {
            name: "张旭超",
            age: 20,
            address: "北京市朝阳区"
        }
    ];

    constructor() {

    }

    addDateFun(data) {
        this.dateList.push(data);
    }
}

4.child-one.comComponent.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.

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

위 내용은 여러 구성 요소 간의 anguar4 공유 서비스 데이터 통신의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!