angular中订阅（subscribe）的用法

最新推荐文章于 2021-07-13 14:54:43 发布

依赖_赖

最新推荐文章于 2021-07-13 14:54:43 发布

阅读量2.3w

点赞数 8

分类专栏： angular 文章标签： angular 发布订阅

本文链接：https://blog.csdn.net/weixin_39150852/article/details/102665986

版权

angular 专栏收录该内容

21 篇文章

订阅专栏

本文详细介绍了在Angular框架中如何通过路由进行参数传递，包括HTML和TypeScript两种方式，以及如何在组件中接收这些参数。此外，还探讨了跨组件函数复用的实现方法，通过服务来调用组件的刷新函数，实现组件间的通信。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、用于页面传参(订阅实时监视着数据的变化)

通过html传递参数：

<a [routerLink]="['/tab4','改变参数']" [queryParams]="{id:123123123123}" >改变路由参数后的tab4</a>

通过ts传递参数:

this.router.navigate(['/tab4'], {queryParams:{ 'id':'123123123123 }});

接收参数：

//配置：
import {ActivatedRoute,Router} from '@angular/router';
constructor(
    private _activateRoute: ActivatedRoute,
    private router: Router
  ) {}

使用:
 this._activateRoute.queryParams.subscribe((params)=>{
      this.id=params['id']
    })

2、用于跨组件的函数复用

通过以下例子实现在服务中调用组件的刷新函数

在组件中引入服务，并使用subscribe调用该组件的刷新函数

import {ImService} from "../common/im/im.service";

constructor(
    public imService: ImService   
  ) {
 	 //freshMemberChange：服务中自定义的变量名，用于发布
    this.imService.freshMemberChange.subscribe(data => {
      if(data==='REMOVE_GROUP'){
       this.refreshData()
     }
    });
  }

在服务中触发刷新函数：

 //freshMemberChange ：自定义变量名，在组件中使用
 //freshMember ：自定义变量名，触发函数时使用，用于订阅
 
import {Subject} from 'rxjs';
public freshMember = new Subject<string>(); 
public freshMemberChange = this.freshMember.asObservable();

 //刷新
 this.freshMember.next('REMOVE_GROUP');