【Angular】Angula6中的组件通信

voyagelab 发布于2019-08-23 15:05 / 623人阅读

摘要：组件通信本文主要介绍中的组件通信一父子组件通信父组件向子组件传递信息方法一在父组件上设置子组件的属性父组件绑定信息可设置子组件标题子组件接收消息方法二父组件调用子组件的方法父组件触发消息子组件接收消息来自子组件的打印子组件向父组件传

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云服务器云服务器组件和组件通信组件通信组件之间通信父子组件通信

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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