在Nx Angular单体仓库中，如何判断共享组件的调用来源应用？

我来给你几个实用的方案，都是Nx Angular项目里常用的思路，你可以根据自己的场景选最合适的：

方案一：通过@Input传递应用标识（最直观可控） #

这是最符合Angular组件通信规范的做法，完全不需要依赖外部环境，逻辑清晰易懂。

1. 在共享组件C中定义输入属性：

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

@Component({
  selector: 'app-c',
  templateUrl: './c.component.html'
})
export class CComponent {
  // 接收父应用传入的来源标识
  @Input() appSource!: string;

  ngOnInit() {
    // 根据来源执行不同逻辑
    if (this.appSource === 'app-a') {
      this.loadAppASpecificData();
    } else if (this.appSource === 'app-b') {
      this.loadAppBSpecificData();
    }
  }

  private loadAppASpecificData() {
    // 应用A专属数据加载逻辑
  }

  private loadAppBSpecificData() {
    // 应用B专属数据加载逻辑
  }
}

2. 在应用A的模板中使用组件时传入标识：

<app-c [appSource]="'app-a'"></app-c>

3. 在应用B的模板中传入对应标识：

<app-c [appSource]="'app-b'"></app-c>

方案二：通过依赖注入令牌实现（优雅的全局方式） #

如果不想在每个使用组件C的地方手动传值，可以用Angular的注入令牌，让每个应用启动时注入自己的标识，组件C直接获取即可。

1. 在共享库中定义注入令牌：

// 比如在libs/shared/src/lib/tokens/app-source.token.ts
import { InjectionToken } from '@angular/core';

export const APP_SOURCE = new InjectionToken<string>('Application Source Identifier');

2. 在应用A的根模块中提供令牌值：

// apps/app-a/src/app/app.module.ts
import { NgModule } from '@angular/core';
import { APP_SOURCE } from '@your-workspace/shared/tokens';

@NgModule({
  providers: [
    { provide: APP_SOURCE, useValue: 'app-a' }
  ]
})
export class AppAModule { }

3. 在应用B的根模块中同理配置：

// apps/app-b/src/app/app.module.ts
import { NgModule } from '@angular/core';
import { APP_SOURCE } from '@your-workspace/shared/tokens';

@NgModule({
  providers: [
    { provide: APP_SOURCE, useValue: 'app-b' }
  ]
})
export class AppBModule { }

4. 在共享组件C中注入令牌并使用：

import { Component, Inject } from '@angular/core';
import { APP_SOURCE } from '@your-workspace/shared/tokens';

@Component({
  selector: 'app-c',
  templateUrl: './c.component.html'
})
export class CComponent {
  constructor(@Inject(APP_SOURCE) private appSource: string) {}

  ngOnInit() {
    console.log(`当前组件由应用 ${this.appSource} 调用`);
    // 根据标识执行对应逻辑
  }
}

方案三：利用Nx环境变量（适合全局配置场景） #

每个Nx应用都有独立的环境配置文件，你可以在每个应用的环境文件中定义标识，再通过共享组件间接读取。

1. 在应用A的环境文件中添加标识：

// apps/app-a/src/environments/environment.ts
export const environment = {
  production: false,
  appName: 'app-a'
};

2. 在应用B的环境文件中添加对应标识：

// apps/app-b/src/environments/environment.ts
export const environment = {
  production: false,
  appName: 'app-b'
};

3. 在共享库中定义抽象服务：

// libs/shared/src/lib/services/environment.service.ts
export abstract class EnvironmentService {
  abstract appName: string;
}

4. 在应用A中实现并提供该服务：

// apps/app-a/src/app/services/environment.service.ts
import { Injectable } from '@angular/core';
import { EnvironmentService } from '@your-workspace/shared/services';
import { environment } from '../../environments/environment';

@Injectable()
export class AppAEnvironmentService implements EnvironmentService {
  appName = environment.appName;
}

同时在AppAModule中替换提供者：

providers: [
  { provide: EnvironmentService, useClass: AppAEnvironmentService }
]

5. 应用B重复上述实现步骤，最后在组件C中注入使用：

import { Component } from '@angular/core';
import { EnvironmentService } from '@your-workspace/shared/services';

@Component({
  selector: 'app-c',
  templateUrl: './c.component.html'
})
export class CComponent {
  constructor(private envService: EnvironmentService) {}

  ngOnInit() {
    console.log(`当前调用应用：${this.envService.appName}`);
  }
}

备注：内容来源于stack exchange，提问作者Alok Agase