【Angular】Angula6中的組件通信

voyagelab 發布于2019-08-23 15:05 / 630人閱讀

摘要：組件通信本文主要介紹中的組件通信一父子組件通信父組件向子組件傳遞信息方法一在父組件上設置子組件的屬性父組件綁定信息可設置子組件標題子組件接收消息方法二父組件調用子組件的方法父組件觸發消息子組件接收消息來自子組件的打印子組件向父組件傳

Angula6_組件通信

本文主要介紹 Angular6 中的組件通信

一、父子組件通信 1.1 父組件向子組件傳遞信息 方法一在父組件上設置子組件的屬性

父組件綁定信息

子組件接收消息

import { Component, OnInit, Input } from "@angular/core";
@Input childTitle: string;

方法二父組件調用子組件的方法

父組件觸發消息

子組件接收消息

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

子組件提供傳遞參數的函數

sendInfo() {
  return "Message from child 1.";
}

父組件使用 ViewChild 觸發并接收信息


{{ info }}

import { Component, OnInit, ViewChild } from "@angular/core";
...
@ViewChild(ChildFirstComponent) private childcomponent: ChildFirstComponent;
getInfo() {
  this.info = this.childcomponent.sendInfo();
}

二、非父子組件通信 方法一 service

缺點：需要雙向的觸發（發送信息 / 接收信息）

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

優點：真正的發布訂閱模式，當數據改變時，訂閱者也能得到響應

service

import { BehaviorSubject } from "rxjs";
...
public messageSource = new BehaviorSubject("Start");
changemessage(message: string): void {
  this.messageSource.next(message);
}

組件調用 service 的方法傳信息和接收信息

changeInfo() {
  this.communication.changemessage("Message from child 1.");
}
ngOnInit() {
  this.communication.messageSource.subscribe(Message => {
    window.alert(Message);
    this.info = Message;
  });
}

三、其他的通信方式

路由傳值

cookie、session、storage

參考文獻

《Angular6.x 學習筆記——組件詳解之組件通訊》

《angular6 組件間的交流方式》

GPU云服務器云服務器組件和組件通信組件通信組件之間通信父子組件通信

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/101477.html

前端知識點總結——Angular

摘要：前端知識點總結一概述基于命令行的開發方式編譯工作集成了打包工具。。。。在瀏覽器中接管展現應用的內容，并根據我們提供的操作指令響應用戶的交互。在開發時，八大組成部分模塊組件模板自帶的標簽指令綁定相關的的語法元數據告訴如何處理一個類。前端知識點總結——Angular 一、Angular概述基于命令行的開發方式？ ①hot reload ②編譯工作 ③集成了webpack打包工具。。。...

BaronZhang 2019-08-22 16:01 評論0 收藏0
angular 組件通信

摘要：單頁面應用組件通信有以下幾種，這篇文章主要講通信父組件子組件子組件父組件組件組件父組件子組件子組件父組件本質上還是注入父組件不推薦使用局部變量的的的上面圖表總結了能用到通信方案期中最后種是通用的的組件之間都可以使用這種其中是最最牛逼的用法甩單頁面應用組件通信有以下幾種，這篇文章主要講 Angular 通信 showImg(https://segmentfault.com/img/re...

張金寶 2019-08-22 18:40 評論0 收藏0
angular 組件通信

摘要：單頁面應用組件通信有以下幾種，這篇文章主要講通信父組件子組件子組件父組件組件組件父組件子組件子組件父組件本質上還是注入父組件不推薦使用局部變量的的的上面圖表總結了能用到通信方案期中最后種是通用的的組件之間都可以使用這種其中是最最牛逼的用法甩單頁面應用組件通信有以下幾種，這篇文章主要講 Angular 通信 showImg(https://segmentfault.com/img/re...

cikenerd 2019-08-02 10:53 評論0 收藏0
angular 組件通信

摘要：單頁面應用組件通信有以下幾種，這篇文章主要講通信父組件子組件子組件父組件組件組件父組件子組件子組件父組件本質上還是注入父組件不推薦使用局部變量的的的上面圖表總結了能用到通信方案期中最后種是通用的的組件之間都可以使用這種其中是最最牛逼的用法甩單頁面應用組件通信有以下幾種，這篇文章主要講 Angular 通信 showImg(https://segmentfault.com/img/re...

Zhuxy 2019-08-30 15:54 評論0 收藏0