美文网首页
Angular用observable解决组件间通信

Angular用observable解决组件间通信

作者: ElliottsSu | 来源:发表于2019-02-20 15:53 被阅读0次

现在前端任意一款主流框架因为都是模块化结构,所以都绕不开组件或者模块之间通信。大部分时间我们说解决组件之间通信是子组件向父传值,一般子组件的值会继承父组件,父变子跟着变,但子变父不会变。

那么今天就来看看在angular4中如何使用Observable来实现子向父传值,当然它也可以在任意两个组件或多个组件中传值。这个方案比官方文档提供的单纯的父子组件关系的解决方案应用范围更广。

实现一个消息通知demo,在任何一个组件调用显示消息方法,在根组件就会显示3秒的消息提示框。

文件结构

  1. 父组件:app.component.ts、app.component.html
  2. 子组件:home.component.html、home.component.html
  3. 服务:shared.service.ts

关键方法

  1. Observable.subscribe() 用于订阅发送可观察对象的消息
  2. Subject.next() 用于向观察者对象发送消息,然后将其发送给改观察者的所有订阅者
  3. Subject.asObservable() 返回一个可观察对象,一旦值变化,便会同时向它的订阅者更新消息。

shared.service公共服务

//shared.service.ts
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { Subject } from 'rxjs/Subject';

@Injectable()
export class SharedService {
    private msg = new Subject<any>();
    //发送消息
    sendMessage(message: string) {
        this.msg.next(message);
    }
    //清除消息
    clearMessage() {
        this.msg.next();
    }
    //获取消息
    getMessage(): Observable<any> {
        return this.msg.asObservable();
    }
}

app父组件获取消息

<!--app.component.html-->
<p-growl [(value)]="alertMsg"></p-growl>
//app.component.ts
public alertMsg: Array<object>;
constructor(private sharedService: SharedService) {}

ngOnInit() {
    //消息提示 从service获取消息内容
    this.sharedService.getMsg().subscribe(value => {
        this.alertMsg = value;
    })

}

home子组件发送消息

<!--home.component.html-->
<button (click)="sendMessage()">Send Message</button>
//home.component.ts
constructor(private sharedService: SharedService) {}

public sendMessage() {
        //发送消息
        this.sharedService.sendMessage('显示成功');
    }

至此,关于子组件向父组件传值就到这里了,主要是学会利用Observable来传值,需要注意一点的是最新版的rxjs不支持该方式,应该有其他方法代替,这个用的rxjs版本是V5.1.0,是可以使用的。

相关文章

  • Angular用observable解决组件间通信

    现在前端任意一款主流框架因为都是模块化结构,所以都绕不开组件或者模块之间通信。大部分时间我们说解决组件之间通信是子...

  • React组件间通信

    不借助redux等状态管理工具的React组件间的通信解决方法 组件通信分类 React组件间通信分为2大类,3种...

  • angular4 子组件向父组件通信

    之前我写过 父组件向子组件通信 :《angular4 父组件向子组件通信传值》https://www.jiansh...

  • Angular 4 事件冒泡

    Angular 组件和 DOM 元素通过事件与外部进行通信, Angular 事件绑定语法对于组件和 DOM 元素...

  • Vue 组件 / 通信

    子组件=》父组件 vue的组件之间的通信类似angular的父子层级之间通信,父组件获取子组件数据步骤大概如下: ...

  • React组件间通信

    1. 组件间通信1.1.父组件向子组件通信1.2.子组件向父组件通信1.3.跨级组件间通信1.4.无嵌套关系组件间...

  • angular 组件通信

    angular组件通信是很长常见的功能,现在总结下,常见通信主要用一下三种 父组件 => 子组件 子组件 => 父...

  • angular 组件通信

    原文链接 https://segmentfault.com/a/1190000008959575#articleH...

  • angular组件通信

    官网:https://angular.cn/guide/component-interaction[https:/...

  • angular组件通信

    拆分组件是一项必须的编程技能,符合高内聚低耦合的设计理念。 父子组件通信 父组件 father.html: fat...

网友评论

      本文标题:Angular用observable解决组件间通信

      本文链接:https://www.haomeiwen.com/subject/wwrtsxtx.html