Angular中如何避免循环依赖，在alert组件访问master组件变量？

完全可行，不用反向导入master组件也能实现alert组件使用master组件的变量，下面是几种常用的实现方式：

1. 使用@Input()输入属性（最直接的父子组件传值） #

如果master组件是alert组件的父组件（从你描述的导入关系来看大概率是），直接在alert组件中定义输入属性，master组件在使用alert时绑定对应的变量即可：

alert.component.ts

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-alert',
  templateUrl: './alert.component.html'
})
export class AlertComponent {
  // 定义输入属性接收master的变量
  @Input() masterTargetVariable: any;
}

master组件模板（master.component.html）

<!-- 将master组件的变量绑定到alert的输入属性上 -->
<app-alert [masterTargetVariable]="yourMasterVariable"></app-alert>

2. 使用共享服务（适合非父子/跨组件场景） #

创建一个全局共享服务，master组件将变量存入服务，alert组件从服务中订阅获取变量，全程无需互相导入组件：

shared-data.service.ts

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

@Injectable({ providedIn: 'root' })
export class SharedDataService {
  // 用BehaviorSubject存储变量，支持订阅更新
  private masterVariable$ = new BehaviorSubject<any>(null);
  public masterVariableObservable = this.masterVariable$.asObservable();

  // 更新变量的方法
  updateMasterVariable(value: any) {
    this.masterVariable$.next(value);
  }
}

master.component.ts

import { Component } from '@angular/core';
import { SharedDataService } from './shared-data.service';

@Component({
  selector: 'app-master',
  templateUrl: './master.component.html'
})
export class MasterComponent {
  yourMasterVariable = '需要共享的master变量值';

  constructor(private sharedDataService: SharedDataService) {
    // 将变量存入服务，动态变化时随时调用update方法
    this.sharedDataService.updateMasterVariable(this.yourMasterVariable);
  }
}

alert.component.ts

import { Component, OnInit } from '@angular/core';
import { SharedDataService } from './shared-data.service';

@Component({
  selector: 'app-alert',
  templateUrl: './alert.component.html'
})
export class AlertComponent implements OnInit {
  masterVariable: any;

  constructor(private sharedDataService: SharedDataService) {}

  ngOnInit() {
    // 订阅服务中的变量，实时获取更新
    this.sharedDataService.masterVariableObservable.subscribe(value => {
      this.masterVariable = value;
    });
  }
}

3. 使用RxJS Subjects（进阶的响应式共享） #

和共享服务思路类似，直接用RxJS的Subject来传递变量，本质是共享服务的简化版，适合简单场景：

你可以在单独的文件中定义Subject，比如：

master-variable.subject.ts

import { BehaviorSubject } from 'rxjs';

export const masterVariableSubject = new BehaviorSubject<any>(null);

然后master组件中更新：

import { Component } from '@angular/core';
import { masterVariableSubject } from './master-variable.subject';

@Component({
  selector: 'app-master',
  templateUrl: './master.component.html'
})
export class MasterComponent {
  yourMasterVariable = 'master的变量';

  ngOnInit() {
    masterVariableSubject.next(this.yourMasterVariable);
  }
}

alert组件中订阅：

import { Component, OnInit } from '@angular/core';
import { masterVariableSubject } from './master-variable.subject';

@Component({
  selector: 'app-alert',
  templateUrl: './alert.component.html'
})
export class AlertComponent implements OnInit {
  masterVariable: any;

  ngOnInit() {
    masterVariableSubject.subscribe(value => {
      this.masterVariable = value;
    });
  }
}

以上三种方式都不需要alert组件导入master组件，完美避免循环依赖问题，根据你的组件关系和业务场景选择即可。

内容的提问来源于stack exchange，提问作者Harshil Ramani