Angular 14如何不导入主组件向弹窗组件传递变量

你尝试的依赖注入方式不可行，因为Angular的依赖注入系统是用来注入类实例而非单个属性的，MainPageComponent["investId"]不是合法的注入令牌，所以IDE报错。下面是几种无需导入主组件就能传递investId的可行方案：

方法1：弹窗组件通过输入属性/弹窗数据接收（最常用） #

如果你的弹窗是通过Angular Material的MatDialog、原生Dialog或类似组件库打开，直接在打开弹窗时传入investId，弹窗组件从传入的data中读取即可：

主页面组件代码： #

import { MatDialog } from '@angular/material/dialog';
import { DialogComponent } from './dialog.component';

export class MainPageComponent {
  investId = 'xxx123'; // 你的变量

  constructor(private dialog: MatDialog) {}

  openDialog() {
    // 打开弹窗时传入investId
    this.dialog.open(DialogComponent, {
      data: { investId: this.investId }
    });
  }
}

弹窗组件代码： #

import { MAT_DIALOG_DATA } from '@angular/material/dialog';
import { Inject } from '@angular/core';

export class DialogComponent {
  investId: string;

  // 通过@Inject接收传入的data
  constructor(@Inject(MAT_DIALOG_DATA) public data: any) {
    this.investId = data.investId;
  }
}

如果是普通组件通过模板引用使用弹窗（比如<app-dialog [investId]="investId"></app-dialog>），则弹窗组件用@Input()：

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

export class DialogComponent {
  @Input() investId: string; // 直接接收主组件传入的值
}

方法2：用共享服务存储传递值 #

创建一个共享服务，主组件把investId存入服务，弹窗组件从服务读取：

共享服务代码： #

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

@Injectable({ providedIn: 'root' })
export class InvestSharedService {
  private _investId: string;

  setInvestId(id: string) {
    this._investId = id;
  }

  getInvestId() {
    return this._investId;
  }
}

主页面组件代码： #

import { InvestSharedService } from './invest-shared.service';

export class MainPageComponent {
  investId = 'xxx123';

  constructor(private sharedService: InvestSharedService) {
    // 把investId存入服务
    this.sharedService.setInvestId(this.investId);
  }
}

弹窗组件代码： #

import { InvestSharedService } from './invest-shared.service';

export class DialogComponent {
  investId: string;

  constructor(private sharedService: InvestSharedService) {
    // 从服务获取investId
    this.investId = this.sharedService.getInvestId();
  }
}

方法3：用RxJS Subject实现响应式传值 #

如果investId可能动态变化，用RxJS的Subject实现实时同步：

共享服务代码： #

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

@Injectable({ providedIn: 'root' })
export class InvestSharedService {
  private investIdSubject = new Subject<string>();
  investId$ = this.investIdSubject.asObservable();

  updateInvestId(id: string) {
    this.investIdSubject.next(id);
  }
}

主页面组件代码： #

import { InvestSharedService } from './invest-shared.service';

export class MainPageComponent {
  investId = 'xxx123';

  constructor(private sharedService: InvestSharedService) {
    // 发射初始值，后续变化时也可调用此方法
    this.sharedService.updateInvestId(this.investId);
  }
}

弹窗组件代码： #

import { InvestSharedService } from './invest-shared.service';
import { Subscription } from 'rxjs';

export class DialogComponent {
  investId: string;
  private subscription: Subscription;

  constructor(private sharedService: InvestSharedService) {
    // 订阅investId的变化
    this.subscription = this.sharedService.investId$.subscribe(id => {
      this.investId = id;
    });
  }

  // 组件销毁时取消订阅，避免内存泄漏
  ngOnDestroy() {
    this.subscription.unsubscribe();
  }
}

内容的提问来源于stack exchange，提问作者Tim's