美文网首页web前端
Angular4 不同页面中进行通信

Angular4 不同页面中进行通信

作者: 南蓝NL | 来源:发表于2018-09-25 15:02 被阅读2次

这里用的还是订阅者模式
深入理解Angular订阅者模式
我在项目当中用的是那个subject,在A页面操作成功发生一个通知到B页面

// rest.service.ts
  send(message: any) {
        this.subject.next(message);
    }

    get(): Observable<any> {
        return this.subject.asObservable();
    }
// A页面发送消息 left.component.ts
  handleRoute(name) {  
    this.router.navigate(['/' + name],{queryParams:{temp:this.temp}});   // 路由传参
// 通过 activedRoute 的snapShot的queryParams["temp"]接收参数或者是
//接收多个参数
constructor(
    private activatedRoute: ActivatedRoute,   //这里需要注入ActivatedRoute模块
) {
    activatedRoute.queryParams.subscribe(queryParams => {
        let productId = queryParams.productId;
        let title = queryParams.title;
    });
    this.restService.send('who are you ?') // 发送消息
  }
// B页面接收消息 upcoming-process.component.ts
  ngOnInit() {
    // 监听页面传过来的值
    this.restService.get().subscribe((result) => {
      this.search(); // 接收消息
    })
  }

相关文章

网友评论

    本文标题:Angular4 不同页面中进行通信

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