資訊專欄INFORMATION COLUMN
摘要：組件通信本文主要介紹中的組件通信一父子組件通信父組件向子組件傳遞信息方法一在父組件上設(shè)置子組件的屬性父組件綁定信息可設(shè)置子組件標(biāo)題子組件接收消息方法二父組件調(diào)用子組件的方法父組件觸發(fā)消息子組件接收消息來自子組件的打印子組件向父組件傳
Angula6_組件通信
本文主要介紹 Angular6 中的組件通信一、父子組件通信 1.1 父組件向子組件傳遞信息 方法一 在父組件上設(shè)置子組件的屬性
父組件綁定信息
子組件接收消息
import { Component, OnInit, Input } from "@angular/core";
@Input childTitle: string;
方法二 父組件調(diào)用子組件的方法
父組件觸發(fā)消息
子組件接收消息
childPrint() {
alert("來自子組件的打印");
}
1.2 子組件向父組件傳遞信息
方法一 使用 EventEmitter
子組件使用 EventEmitter 傳遞消息
import { Component, OnInit, Output, EventEmitter } from "@angular/core";
...
@Output() initEmit = new EventEmitter();
ngOnInit() {
this.initEmit.emit("子組件初始化成功");
}
...
父組件接收消息
accept(msg:string) {
alert(msg);
}
方法二 使用 ViewChild
子組件提供傳遞參數(shù)的函數(shù)
sendInfo() {
return "Message from child 1.";
}
父組件使用 ViewChild 觸發(fā)并接收信息
{{ info }}
import { Component, OnInit, ViewChild } from "@angular/core";
...
@ViewChild(ChildFirstComponent) private childcomponent: ChildFirstComponent;
getInfo() {
this.info = this.childcomponent.sendInfo();
}
二、非父子組件通信
方法一 service
缺點(diǎn)：需要雙向的觸發(fā)（發(fā)送信息 / 接收信息）
service.ts
import { Component, Injectable, EventEmitter } from "@angular/core";
@Injectable()
export class myService {
public info: string = "";
constructor() {}
}
組件 1 向 service 傳遞信息
import { myService } from "../../service/myService.service";
...
constructor(
public service: myService
) { }
changeInfo() {
this.service.info = this.service.info + "1234";
}
...
組件 2 從 service 獲取信息
import { myService } from "../../service/myService.service";
...
constructor(
public service: myService
) { }
showInfo() {
alert(this.service.info);
}
...
方法二 使用 BehaviorSubject
優(yōu)點(diǎn)：真正的發(fā)布訂閱模式，當(dāng)數(shù)據(jù)改變時(shí)，訂閱者也能得到響應(yīng)
service
import { BehaviorSubject } from "rxjs";
...
public messageSource = new BehaviorSubject("Start");
changemessage(message: string): void {
this.messageSource.next(message);
}
組件調(diào)用 service 的方法傳信息和接收信息
changeInfo() {
this.communication.changemessage("Message from child 1.");
}
ngOnInit() {
this.communication.messageSource.subscribe(Message => {
window.alert(Message);
this.info = Message;
});
}
三、其他的通信方式
路由傳值
cookie、session、storage
參考文獻(xiàn)《Angular6.x 學(xué)習(xí)筆記——組件詳解之組件通訊》
《angular6 組件間的交流方式》
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/101477.html
摘要：前端知識(shí)點(diǎn)總結(jié)一概述基于命令行的開發(fā)方式編譯工作集成了打包工具。。。。在瀏覽器中接管展現(xiàn)應(yīng)用的內(nèi)容，并根據(jù)我們提供的操作指令響應(yīng)用戶的交互。在開發(fā)時(shí)，八大組成部分模塊組件模板自帶的標(biāo)簽指令綁定相關(guān)的的語法元數(shù)據(jù)告訴如何處理一個(gè)類。 前端知識(shí)點(diǎn)總結(jié)——Angular 一、Angular概述 基于命令行的開發(fā)方式？ ①hot reload ②編譯工作 ③集成了webpack打包工具 。。。...
摘要：單頁面應(yīng)用組件通信有以下幾種，這篇文章主要講通信父組件子組件子組件父組件組件組件父組件子組件子組件父組件本質(zhì)上還是注入父組件不推薦使用局部變量的的的上面圖表總結(jié)了能用到通信方案期中最后種是通用的的組件之間都可以使用這種其中是最最牛逼的用法甩 單頁面應(yīng)用組件通信有以下幾種，這篇文章主要講 Angular 通信 showImg(https://segmentfault.com/img/re...
摘要：單頁面應(yīng)用組件通信有以下幾種，這篇文章主要講通信父組件子組件子組件父組件組件組件父組件子組件子組件父組件本質(zhì)上還是注入父組件不推薦使用局部變量的的的上面圖表總結(jié)了能用到通信方案期中最后種是通用的的組件之間都可以使用這種其中是最最牛逼的用法甩 單頁面應(yīng)用組件通信有以下幾種，這篇文章主要講 Angular 通信 showImg(https://segmentfault.com/img/re...
摘要：單頁面應(yīng)用組件通信有以下幾種，這篇文章主要講通信父組件子組件子組件父組件組件組件父組件子組件子組件父組件本質(zhì)上還是注入父組件不推薦使用局部變量的的的上面圖表總結(jié)了能用到通信方案期中最后種是通用的的組件之間都可以使用這種其中是最最牛逼的用法甩 單頁面應(yīng)用組件通信有以下幾種，這篇文章主要講 Angular 通信 showImg(https://segmentfault.com/img/re...
閱讀 4442·2021-09-09 09:33
閱讀 2391·2019-08-29 17:15
閱讀 2377·2019-08-29 16:21
閱讀 989·2019-08-29 15:06
閱讀 2624·2019-08-29 13:25
閱讀 589·2019-08-29 11:32
閱讀 3263·2019-08-26 11:55
閱讀 2598·2019-08-23 18:24
