Heim > Web-Frontend > js-Tutorial > Datenkommunikation in mehreren Komponenten angle4

Datenkommunikation in mehreren Komponenten angle4

php中世界最好的语言
Freigeben: 2018-04-20 15:41:22
Original
1397 Leute haben es durchsucht

Dieses Mal werde ich Ihnen Angular4 für die Datenkommunikation in mehreren Komponenten vorstellen. Was sind die Vorsichtsmaßnahmen bei der Verwendung mehrerer Komponenten für die Datenkommunikation Angular4? Das Folgende ist ein praktischer Fall.

Anwendungsszenario: Betreiben Sie einen einheitlichen Datensatz in verschiedenen Komponenten. Unabhängig davon, welche Komponente die Daten verarbeitet, ist der Effekt sofort in anderen Komponenten sichtbar. Auf diese Weise müssen sie eine Dienstinstanz gemeinsam nutzen, worauf es in diesem Artikel ankommt. Wenn es sich um unterschiedliche Instanzen handelt, werden sie nicht mit demselben Datensatz betrieben, sodass ein solcher Effekt nicht auftritt Um eine gemeinsam genutzte Dienstinstanz zu erreichen, müssen Sie alle übergeordneten Komponenten privatisieren. Diese Komponente wird in :[] eingeführt und muss nicht erneut in der Unterkomponente eingeführt werden, dann verwenden sie alle die Dienstinstanz in der übergeordneten Komponente.

1. Öffentliche Dienste

import {Injectable} from "@angular/core";
@Injectable()
export class CommonService {
 public dateList: any = [
 {
  name: "张旭超",
  age: 20,
  address: "北京市朝阳区"
 }
 ];
 constructor() {
 }
 addDateFun(data) {
 this.dateList.push(data);
 }
}
Nach dem Login kopieren

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() {
 }
}
Nach dem Login kopieren

3 >4. child-one.component.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>
Nach dem Login kopieren

5. child-one.component.html

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 = {};
 }
}
Nach dem Login kopieren

<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>
Nach dem Login kopieren

Ich glaube, das hast du Lesen Sie diesen Artikel. Sie beherrschen die Fallmethode. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

JS+Canva ermöglicht Vorschau-Komprimierung und Bild-Upload-Funktionen


So speichern Sie Schlüsselwerte in js

Das obige ist der detaillierte Inhalt vonDatenkommunikation in mehreren Komponenten angle4. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage