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.使用服务通信-订阅模式

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);
    });
  }

}