Data communication in multiple components angular4
This time I will bring you angular4 for data communication in multiple components. What are the precautions for using angular4 for data communication in multiple components? The following is a practical case, let's take a look.
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 serviceimport {Injectable} from "@angular/core";
@Injectable()
export class CommonService {
public dateList: any = [
{
name: "张旭超",
age: 20,
address: "北京市朝阳区"
}
];
constructor() {
}
addDateFun(data) {
this.dateList.push(data);
}
}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() {
}
}<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>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 = {};
}
}<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>
JS Canva makes preview compression and upload image functions
How to store key values in js
The above is the detailed content of Data communication in multiple components angular4. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
How to use PHP and TCP/IP protocol for data communication
Jul 29, 2023 pm 01:46 PM
How to use PHP and TCP/IP protocol for data communication Introduction: In the modern Internet era, data communication is a very important aspect. Whether it is communication between a client and a server or communication between different servers, the TCP/IP protocol has always been one of the most commonly used communication protocols. This article will introduce how to use PHP language and TCP/IP protocol for data communication, and provide relevant code examples. 1. Introduction to TCP/IP protocol TCP/IP protocol is the basis of the Internet protocol cluster. It defines
How to use socket programming in Python for data communication
Oct 18, 2023 am 11:06 AM
Title: Socket Programming and Code Examples in Python Introduction: In the modern Internet era, data communication is everywhere. Socket programming in Python provides a simple and effective way to realize data transmission on the network. This article will introduce how to use Python's socket module for data communication, and provide specific code examples to help readers better understand and apply socket programming. 1. What is socket programming? Socket, that is, socket, is the implementation of
RFM analysis using Python
Sep 03, 2023 pm 12:45 PM
Python is a versatile programming language that is popular in the field of data analysis and machine learning. Its simplicity, readability, and rich library make it ideal for handling complex data tasks. One such powerful application is RFM analysis, a technique used in marketing to segment customers based on their purchasing behavior. In this tutorial, we will guide you through the process of implementing RFM analysis using Python. We will start by explaining the concept of RFM analysis and its importance in marketing. We will then gradually dive into the practical aspects of RFM analysis using Python. In the next part of the article, we will demonstrate how to calculate an RFM score for each customer using Python, taking into account the values for recency, frequency, and
'Black Myth: Wukong ' Xbox version was delayed due to 'memory leak', PS5 version optimization is in progress
Aug 27, 2024 pm 03:38 PM
Recently, "Black Myth: Wukong" has attracted huge attention around the world. The number of people online at the same time on each platform has reached a new high. This game has achieved great commercial success on multiple platforms. The Xbox version of "Black Myth: Wukong" has been postponed. Although "Black Myth: Wukong" has been released on PC and PS5 platforms, there has been no definite news about its Xbox version. It is understood that the official has confirmed that "Black Myth: Wukong" will be launched on the Xbox platform. However, the specific launch date has not yet been announced. It was recently reported that the Xbox version's delay was due to technical issues. According to a relevant blogger, he learned from communications with developers and "Xbox insiders" during Gamescom that the Xbox version of "Black Myth: Wukong" exists.
How to use socket programming in Python for data communication and collaborative computing between different machines
Oct 21, 2023 am 11:38 AM
Title: Using socket programming in Python to implement data communication and collaborative computing between machines Introduction: In the field of computers, data communication and collaborative computing between different machines is one of the key technologies for realizing distributed systems and parallel computing. Socket programming in Python is a commonly used and powerful network programming tool, which can be used to realize data transmission and communication between machines. This article will introduce how to use socket programming in Python to achieve data communication and collaborative computing between different machines, and
Detailed explanation of cross-language data communication with Redis
Jun 20, 2023 pm 06:19 PM
As a high-speed and efficient in-memory database, Redis has been widely used in various fields. In addition to data storage and reading in a single language environment, Redis can also achieve cross-language data communication. This cross-language data communication can greatly improve system interoperability. This article will introduce in detail how to use Redis to achieve cross-language data communication. 1. Review of the basic concepts of Redis Redis is a memory-based key-value database that supports a variety of data structures. In Redis, each data is represented by "k
What are the three methods of data communication?
Jan 02, 2021 pm 04:26 PM
Three methods of data communication: 1. Simplex communication, which only supports data transmission in one direction; 2. Half-duplex communication, which allows data to be transmitted in both directions, but only allows data to be transmitted in one direction at the same time. Transmission; 3. Full-duplex communication, allowing data to be transmitted in two directions at the same time, that is, both parties to the communication can send and receive data at the same time.
Let's write a new armband together. 'World of Warships” World Chinese Day event is in progress
Apr 24, 2024 pm 05:25 PM
Every word becomes a painting, every sentence becomes a poem. The World Chinese Day event of "World of Warships" is underway. Participate in the voting and choose the Chinese character that best represents the game and the beauty of the Chinese language. It will be added to the game as an armband in the future to help more captains around the world understand Chinese culture. At the same time, you can also get permanent paint by completing special combat missions. Now, 20 Chinese characters related to "World of Warships" and with Chinese cultural significance are waiting for the captain to choose. Captains can participate in voting on the designated page of the official website and choose their favorite Chinese characters. The Chinese character with the most votes will be added to the game as a new armband in the future! Which Chinese characters such as "Heaven", "Earth", "Dao", "Attack", "Defense", and "Cannon" will be added to the game as armbands will be decided by the captains. Voting page: h
