1.新建一個(gè)service文件

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

@Injectable({
  providedIn: 'root'
})
export class ControllService {
  // Observable boolean sources
  private showEditCountSource = new Subject<boolean>();
  // Observable boolean streams
  showEditCount$ = this.showEditCountSource.asObservable();
  // 通過調(diào)用該方法傳值
  changeIsShowDetail(state: boolean) {
    this.showEditCountSource.next(state);
  }
}

2.在需要共享數(shù)據(jù)的組件中（比如A組件和B組件）引入ControllService
這里B組件是點(diǎn)擊A組件元素后路由出來的模塊

// A.component.ts
import { ControllService } from 'path';
import { Router, ActivatedRoute } from '@angular/router';
import { Component, OnInit } from '@angular/core';
import { Subscription } from 'rxjs';
...

@Component({
  ...
})
export class AComponent implements OnInit {
  ...
  isShowDetail = false;
  subscription: Subscription;
  constructor(
    ...
    public controllService: ControllService,
    public activatedRoute: ActivatedRoute) {
    // 通過監(jiān)測路由query參數(shù)的變化來讓A頁面上的元素顯示隱藏
    this.activatedRoute.queryParams.subscribe(params => {
      if (Object.keys(params).length === 0) {
        this.controllService.changeIsShowDetail(false);
      }
    });
    this.subscription = this.controllService.showEditCount$.subscribe(
      mission => {
        // 通過該參數(shù)顯示隱藏該頁面上的元素
        this.isShowDetail = mission;
      });
  }
  routeToB(id) {
    // 修改共享的數(shù)據(jù)
    this.controllService.changeIsShowDetail(true);
    // 必需添加queryParams,不然瀏覽器的返回?zé)o法監(jiān)測到路由的變化
    this.router.navigate([`/b`],
      { queryParams: { type: id } });
  }
}

// B.component.ts
import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { ControllService } from 'path';

@Component({
  ...
})
export class BComponent implements OnInit {
  constructor(
    public router: Router,
    public controllService: ControllService,
    public activatedRoute: ActivatedRoute) {
    // 刷新時(shí)也要隱藏掉A組件上的元素
    this.activatedRoute.queryParams.subscribe(params => {
      // 修改共享的數(shù)據(jù)
      this.controllService.changeIsShowDetail(true);
    });
  }

  ngOnInit() {
  }

}