Angular通过订阅观察者对象实现不同组件中数据的实时传递

发布时间:2019-06-02 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了Angular通过订阅观察者对象实现不同组件中数据的实时传递脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

Angular官方定义中,组件直接的数据交换只要在父子直接传递,但是我们在项目中经常需要在各种层级之间传递数据,下面介绍关于订阅可观察对象实现的数据传递。

首先定义一个服务app.sevice.ts,服务里面new一个SubJect对象:

// app.servie.ts
import { Injectable } from '@angular/core';
import { Subject } from 'rxjs/Subject';
 
@Injectable()
export class AppService {
 
  constructor() { }
 
  sub = new Subject<any>();
 
}

然后,定义两个组件one-child和two-child在app.compnent显示:

// app.component.ts
<one-child></one-child>
<two-child></two-child>

其中,one-child里面有一个输入框,绑定keyup方法sendText:

// one-child.component.html
<p>
  one-child works! <input #input type="text" (keyup)="sendText(input.value)" >
</p>

在one-child里面注入app.service,调用sub对象:

import { Component } from '@angular/core';
import { AppService } from '../app.service'
 
@Component({
  selector: 'one-child',
  templateUrl: './one-child.component.html',
  styleUrls: ['./one-child.component.scss']
})
export class OneChildComponent {
 
  constructor(
    private appService: AppService
  ) { }
 
  sendText(value) {
    console.log("one-child: " + value);
    this.appService.sub.next(value);
  }
 
}

此时,在two-child里面订阅sub对象获取数据:

// two-child.component.ts
import { Component, OnInit } from '@angular/core';
import { AppService } from '../app.service'
  
@Component({
  selector: 'two-child',
  templateUrl: './two-child.component.html',
  styleUrls: ['./two-child.component.scss']
})
export class TwoChildComponent implements OnInit {
  
  value;
  constructor(
    private appService: AppService
  ) { }
  
  ngOnInit() {
    this.appService.sub.subscribe(res => {
      this.value = res;
      console.log("two-child: " + res);
    })
  }
}

最终我们就可以看到在one-child里面输入的数据在two-child也可以接收到了:

Angular通过订阅观察者对象实现不同组件中数据的实时传递

最后的话,对于订阅对象,在组件销毁的时候,根据实际情况要取消订阅:

ngOnDestroy() {
  this.appService.sub.unsubscribe();
}

demo可从下面地址下载体验,下载后运行npm install:
https://github.com/ldpliudong...

脚本宝典总结

以上是脚本宝典为你收集整理的Angular通过订阅观察者对象实现不同组件中数据的实时传递全部内容,希望文章能够帮你解决Angular通过订阅观察者对象实现不同组件中数据的实时传递所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。