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');
Logo

有“AI”的1024 = 2048,欢迎大家加入2048 AI社区

更多推荐