angular4多个组件相互数据通信
这次给大家带来angular4多个组件相互数据通信,angular4多个组件相互数据通信的注意事项有哪些,下面就是实战案例,一起来看一下。
应用场景,不同组件中操作统一组数据,不论哪个组件对数据进行了操作,其他组件中立马看到效果。这样他们就要共用一个服务实例,是本次的重点,如果不同实例,那么操作的就不是同一组数据,那么就不会有这样的效果,想实现共用服务实例,就是在所有父组件中priviates:[]中引入这个组件,子组件中不需要再次引入,那么他们都是用的父组件中的服务实例。
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
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>
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
Atas ialah kandungan terperinci angular4多个组件相互数据通信. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Alat AI Hot

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool
Gambar buka pakaian secara percuma

Clothoff.io
Penyingkiran pakaian AI

AI Hentai Generator
Menjana ai hentai secara percuma.

Artikel Panas

Alat panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas

Cara menggunakan PHP dan protokol TCP/IP untuk komunikasi data Pengenalan: Dalam era Internet moden, komunikasi data merupakan aspek yang sangat penting. Sama ada komunikasi antara pelanggan dan pelayan atau komunikasi antara pelayan yang berbeza, protokol TCP/IP sentiasa menjadi salah satu protokol komunikasi yang paling biasa digunakan. Artikel ini akan memperkenalkan cara menggunakan bahasa PHP dan protokol TCP/IP untuk komunikasi data, dan memberikan contoh kod yang berkaitan. 1. Pengenalan kepada protokol TCP/IP Protokol TCP/IP adalah asas kepada kluster protokol Internet

Tajuk: Pengaturcaraan Soket dan Contoh Kod dalam Python Pengenalan: Dalam era Internet moden, komunikasi data ada di mana-mana. Pengaturcaraan soket dalam Python menyediakan cara yang mudah dan berkesan untuk merealisasikan penghantaran data pada rangkaian. Artikel ini akan memperkenalkan cara menggunakan modul soket Python untuk komunikasi data, dan menyediakan contoh kod khusus untuk membantu pembaca memahami dan menggunakan pengaturcaraan soket dengan lebih baik. 1. Apakah pengaturcaraan soket? Soket, iaitu, soket, adalah pelaksanaan

Tajuk: Menggunakan pengaturcaraan soket dalam Python untuk melaksanakan komunikasi data dan pengkomputeran kolaboratif antara mesin Pengenalan: Dalam bidang komputer, komunikasi data dan pengkomputeran kolaboratif antara mesin yang berbeza merupakan salah satu teknologi utama untuk merealisasikan sistem teragih dan pengkomputeran selari. Pengaturcaraan soket dalam Python ialah alat pengaturcaraan rangkaian yang biasa digunakan dan berkuasa, yang boleh digunakan untuk merealisasikan penghantaran data dan komunikasi antara mesin. Artikel ini akan memperkenalkan cara menggunakan pengaturcaraan soket dalam Python untuk mencapai komunikasi data dan pengkomputeran kolaboratif antara mesin yang berbeza, dan

Sebagai pangkalan data dalam memori berkelajuan tinggi dan cekap, Redis telah digunakan secara meluas dalam pelbagai bidang. Sebagai tambahan kepada penyimpanan data dan pembacaan dalam persekitaran bahasa tunggal, Redis juga boleh mencapai komunikasi data merentas bahasa. Komunikasi data merentas bahasa ini boleh meningkatkan kesalingoperasian sistem dengan sangat baik. Artikel ini akan memperkenalkan secara terperinci cara menggunakan Redis untuk mencapai komunikasi data merentas bahasa. 1. Kajian semula konsep asas Redis Redis ialah pangkalan data nilai kunci berasaskan memori yang menyokong pelbagai struktur data. Dalam Redis, setiap data diwakili oleh "k

数据通信的三种方式:1、单工通信,只支持数据在一个方向上传输;2、半双工通信,允许数据在两个方向上传输,但在同一时刻,只允许数据在一个方向上传输;3、全双工通信,允许数据同时在两个方向上传输,即通信的双方可以同时发送和接收数据。

Bagaimanakah PHP dan swoole mencapai komunikasi dan penyegerakan data yang cekap? Dalam pembangunan web, komunikasi data dan penyegerakan adalah sangat penting. PHP ialah bahasa skrip yang digunakan secara meluas, dan swoole ialah sambungan PHP berprestasi tinggi yang boleh menyediakan ciri-ciri termaju asynchronous, multi-threading, berbilang proses dan lain-lain, sekali gus meningkatkan prestasi dan kecekapan PHP. Artikel ini akan memperkenalkan cara menggunakan PHP dan swoole untuk mencapai komunikasi dan penyegerakan data yang cekap. 1. Bermula dengan swole sebelum menggunakan swole

Teknologi praktikal dalam pembangunan PHP - menggunakan antara muka API untuk mencapai komunikasi masa nyata data dan pencetus peristiwa Pengenalan: Dengan perkembangan pesat Internet, semakin banyak laman web atau aplikasi perlu melaksanakan komunikasi masa nyata data dan pencetus peristiwa untuk bertemu keperluan pengguna. Dalam pembangunan PHP, kita boleh menggunakan antara muka API untuk melaksanakan fungsi ini. Artikel ini akan memperkenalkan cara menggunakan antara muka API untuk mencapai komunikasi masa nyata data dan pencetus peristiwa, dan melampirkan contoh kod. 1. Apakah antara muka API? API (Application

Cara menggunakan PHP dan SOAP untuk komunikasi data antara sistem yang berbeza Dalam era Internet hari ini, pertukaran data dan komunikasi antara sistem yang berbeza telah menjadi semakin penting. Sebagai bahasa skrip bahagian pelayan yang digunakan secara meluas, PHP boleh menjadikan komunikasi data antara sistem yang berbeza lebih mudah dan cekap dengan menggunakan SOAP (Simple Object Access Protocol). Artikel ini akan memperkenalkan cara menggunakan PHP dan SOAP untuk melaksanakan komunikasi data antara sistem yang berbeza dan menyediakan contoh kod yang sepadan. 1. Apa itu SABUN?
