angular组件通信

1.路由传递参数

a.ts:

import { Router } from '@angular/router';
export class HomeComponent {


  constructor( public router: Router) {

  }
  // 路由跳转-传递参数-这是在html中绑定的click跳转事件
  jumpHandle(item) {


    this.router.navigate([`home/monitor`], {
      queryParams: {
        queryPoint: item
      }
    });
}

b.ts

import { Router, ActivatedRoute } from '@angular/router';
export class MonitorComponent implements OnInit {


  constructor( private activatedRoute: ActivatedRoute,) {

  }

  ngOnInit() {

    this.activatedRoute.queryParams.subscribe(queryParams => {
      console.log('this.queryParams');
      console.log(queryParams.queryPoint);
    });

  }

}

2.使用服务通信-订阅模式

(1).写一个公用服务communicate.service.ts（angular6）--推荐使用

import { Injectable } from '@angular/core';
import { Observable, Subject } from 'rxjs';

@Injectable()
export class CommunicateService {
    private subject = new Subject<any>();

    sendMessage(message: string) {
        this.subject.next({ text: message });
    }

    clearMessage() {
        this.subject.next();
    }

    getMessage(): Observable<any> {
        return this.subject.asObservable();
    }
}

导入服务调用方法即可。

（2）其他方法（angular2+）

(2.1)

import { Injectable } from '@angular/core';
import { ReplaySubject } from 'rxjs/';
import { Observable } from 'rxjs/';
@Injectable()

export class CommunicateService {

    private _sendMessage: ReplaySubject<any> = new ReplaySubject<any>(1);
    /**
     * 向其他组件发送信
     * 需要发送的信息
     */

    public sendMessage(message: any): Observable<any> {
        this._sendMessage.next(message); // 报错

    }

    /** *订阅其他组件发送来的消息 * @returns {Observalue<any>} */

    public getMessage(): Observable<any> {
        return this._sendMessage.asObservable();

    }
}

（2.2）

mess.service.ts:

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs/';

@Injectable()
export class MessService {

    private Source = new Subject<any>();
    Status$ = this.Source.asObservable();
    StatusMission(message: any) {
        this.Source.next(message);
    }
}

a.ts:

import { MessService } from '../service/mess.service';
export class HomeComponent {


  constructor( public messService: MessService) {

  }
    // html 调用
  jumpHandle(item) {
    this.queryPoint = item;
    this.messService.StatusMission(this.queryPoint);


  }
}

b.ts

import { MessService } from '../service/mess.service';
export class HomeComponent {


  constructor( public messService: MessService) {
    this.subscription = messService.Status$.subscribe(message => {
      this.queryPoint = message;
      console.log('this.queryPoint');
      console.log(this.queryPoint);
    });
  }

}

其他参考文档：

https://www.cnblogs.com/zzcit/p/6053324.html

https://stackoverflow.com/questions/50371582/angular-6-passing-messages-via-service-to-from-component-to-message-component

https://blog.csdn.net/yaomengzhi/article/details/80277702