使用服务将数据从非同级组件传递到 Angular 中的另一个组件答案

【问题标题】：Pass data from non sibling component to another component in Angular using a service使用服务将数据从非同级组件传递到 Angular 中的另一个组件
【发布时间】：2021-11-01 10:49:27
【问题描述】：

这是我的服务类

export class DataService {
  public isConfirm = new Subject();

  sentIsConfirm(isConfirm: boolean) {
    this.isConfirm.next(isConfirm);
  }

  getIsConfirm(): Observable<any> {
    return this.isConfirm.asObservable();
  }

}

这是我的组件1

 constructor(   
    private dataService: DataService
  ) 
isConfirm: boolean = true;

 leave() {
   this.dataService.sentIsConfirm(this.Confirm);
 }

这是我的另一个组件 2。leave() 是 html 中的点击事件。

 confirmation: boolean;
    canExit(): boolean{
     subscription: Subscription;
     this.subscription = this.dataService.getIsConfirm().subscribe((isConfirm) => {
          console.log(isConfirm);
          this.confirmation = isConfirm;
          console.log(this.confirmation);
        });
    }

这是我的路线守卫

export class DeactivateGuardService implements CanDeactivate<SolutionCanvasComponent> {

  component: Object;
  route: ActivatedRouteSnapshot;

  constructor() { }

  canDeactivate(component: Component2,
                route: ActivatedRouteSnapshot,
                state: RouterStateSnapshot,
                nextState?: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {

    return component.canExit();
  }

但我无法从组件 1 到组件 2 获取数据。还是我需要将服务添加到模块中的任何提供程序。

【问题讨论】：

标签： angular typescript angular-services angular-route-guards

【解决方案1】：

你需要在 dispatch 事件之前注册 observable：

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

@Injectable({
  providedIn: 'root'
})
export class DataServiceService {
  public isConfirm = new Subject();
  public isConfirm$: Observable<any>;

  constructor() {
    this.isConfirm$ = this.isConfirm.asObservable();
  }

  sentIsConfirm(isConfirmed: boolean) {
    this.isConfirm.next(isConfirmed);
  }

  getIsConfirm(): Observable<any> {
    return this.isConfirm$;
  }
}

【讨论】：