Angular 如何避免组件c-tor中的联合类型需要依赖注入？

我有两个组件（可以实现公共基类/接口）

组件构造函数的自动依赖项注入机制不适用于我的情况，因为这两个组件的公共子组件需要访问它们的特定父组件

我应该怎么做才能使两个父类型都有一个单一类型的子组件

源代码 时钟视图组件 时钟数据网格组件 时钟流视图组件 模板 当前，数据网格和流视图的模板相同：

，我在Chrome控制台中遇到此错误：

core.js:38781 Angular is running in the development mode. Call enableProdMode() to enable the production mode.
ClocksDataGridComponent.html:4 ERROR NullInjectorError: StaticInjectorError(AppModule)[ClockViewComponent -> ClocksFlowViewComponent]: 
  StaticInjectorError(Platform: core)[ClockViewComponent -> ClocksFlowViewComponent]: 
    NullInjectorError: No provider for ClocksFlowViewComponent!
    at NullInjector.get (http://localhost:4200/vendor.js:39072:27)
    at resolveToken (http://localhost:4200/vendor.js:53990:24)
    at tryResolveToken (http://localhost:4200/vendor.js:53916:16)
    at StaticInjector.get (http://localhost:4200/vendor.js:53766:20)
    at resolveToken (http://localhost:4200/vendor.js:53990:24)
    at tryResolveToken (http://localhost:4200/vendor.js:53916:16)
    at StaticInjector.get (http://localhost:4200/vendor.js:53766:20)
    at resolveNgModuleDep (http://localhost:4200/vendor.js:64953:29)
    at NgModuleRef_.get (http://localhost:4200/vendor.js:66019:16)
    at resolveDep (http://localhost:4200/vendor.js:66550:45)
View_ClocksDataGridComponent_1 @ ClocksDataGridComponent.html:4
logError @ core.js:45546
handleError @ core.js:6066
(anonymous) @ core.js:41058
invoke @ zone-evergreen.js:359
run @ zone-evergreen.js:124
runOutsideAngular @ core.js:39572
tick @ core.js:41055
(anonymous) @ core.js:40893
invoke @ zone-evergreen.js:359
onInvoke @ core.js:39699
invoke @ zone-evergreen.js:358
run @ zone-evergreen.js:124
run @ core.js:39511
next @ core.js:40890
schedulerFn @ core.js:35336
__tryOrUnsub @ Subscriber.js:185
next @ Subscriber.js:124
_next @ Subscriber.js:72
next @ Subscriber.js:49
next @ Subject.js:39
emit @ core.js:35298
checkStable @ core.js:39642
onHasTask @ core.js:39719
hasTask @ zone-evergreen.js:411
_updateTaskCount @ zone-evergreen.js:431
_updateTaskCount @ zone-evergreen.js:264
runTask @ zone-evergreen.js:185
drainMicroTaskQueue @ zone-evergreen.js:559
Promise.then (async)
scheduleMicroTask @ zone-evergreen.js:542
scheduleTask @ zone-evergreen.js:381
scheduleTask @ zone-evergreen.js:211
scheduleMicroTask @ zone-evergreen.js:231
scheduleResolveOrReject @ zone-evergreen.js:845
then @ zone-evergreen.js:955
bootstrapModule @ core.js:40600
./src/main.ts @ main.ts:11
__webpack_require__ @ bootstrap:79
0 @ main.ts:18
__webpack_require__ @ bootstrap:79
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.js:1
ClocksDataGridComponent.html:4 ERROR CONTEXT DebugContext_ {view: {…}, nodeIndex: 2, nodeDef: {…}, elDef: {…}, elView: {…}}
View_ClocksDataGridComponent_1 @ ClocksDataGridComponent.html:4
logError @ core.js:45546
handleError @ core.js:6071
(anonymous) @ core.js:41058
invoke @ zone-evergreen.js:359
run @ zone-evergreen.js:124
runOutsideAngular @ core.js:39572
tick @ core.js:41055
(anonymous) @ core.js:40893
invoke @ zone-evergreen.js:359
onInvoke @ core.js:39699
invoke @ zone-evergreen.js:358
run @ zone-evergreen.js:124
run @ core.js:39511
next @ core.js:40890
schedulerFn @ core.js:35336
__tryOrUnsub @ Subscriber.js:185
next @ Subscriber.js:124
_next @ Subscriber.js:72
next @ Subscriber.js:49
next @ Subject.js:39
emit @ core.js:35298
checkStable @ core.js:39642
onHasTask @ core.js:39719
hasTask @ zone-evergreen.js:411
_updateTaskCount @ zone-evergreen.js:431
_updateTaskCount @ zone-evergreen.js:264
runTask @ zone-evergreen.js:185
drainMicroTaskQueue @ zone-evergreen.js:559
Promise.then (async)
scheduleMicroTask @ zone-evergreen.js:542
scheduleTask @ zone-evergreen.js:381
scheduleTask @ zone-evergreen.js:211
scheduleMicroTask @ zone-evergreen.js:231
scheduleResolveOrReject @ zone-evergreen.js:845
then @ zone-evergreen.js:955
bootstrapModule @ core.js:40600
./src/main.ts @ main.ts:11
__webpack_require__ @ bootstrap:79
0 @ main.ts:18
__webpack_require__ @ bootstrap:79
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.js:1
client:52 [WDS] Live Reloading enabled.

简明扼要地说，问题在于构造函数中的依赖项注入不适用于联合类型（在我的例子中是
ClocksFlowViewComponent | ClocksDataGridComponent
）。问题是，如果我输入一个联合类型，它会抛出一个运行时错误，如果我输入两个参数，其中一个参数也会失败，并出现运行时错误，我不知道最正确的替代方法

。。。
建造师(
private parentCollectionView:ClocksFlowViewComponent
) { }
...

GitHub回购协议是

这是我和Angular的第一天。多谢各位

更新1
我试图实现的是
时钟视图
组件中的
onClicked
方法。我想知道选择了哪个
时钟视图
。将来我可能希望有复杂的选择机制（多个选择，使用Ctrl、Shift、rubberband矩形和鼠标单击）。
您可以提供所有容器组件作为某个令牌（对于所有可能的容器都是相同的），以便其子代能够注入它们

const CONTAINER_TOKEN = new InjectionToken<ContainerInterface>('Container Token');
....
@Component({
...
providers: [{provide: CONTAINER_TOKEN, useExisting: ClocksFlowViewComponent }]
})
export class ClocksFlowViewComponent {
}
...
@Component({
...
providers: [{provide: CONTAINER_TOKEN, useExisting: ClocksDataGridComponent }]
})
export class ClocksDataGridComponent {
}
...
export class ClockViewComponent implements OnInit {

  @Input() clock: Clock;

  constructor(
    @Inject(CONTAINER_TOKEN ) private parentCollectionView: ContainerInterface
  ) { }


const CONTAINER_TOKEN=new InjectionToken（'CONTAINER TOKEN'）；
....
@组成部分({
...
提供程序：[{provide:CONTAINER_令牌，useExisting:ClocksFlowViewComponent}]
})
导出类ClocksFlowViewComponent{
}
...
@组成部分({
...
提供程序：[{provide:CONTAINER_令牌，useExisting:ClocksDataGridComponent}]
})
导出类ClocksDataGridComponent{
}
...
导出类ClockViewComponent实现OnInit{
@输入（）时钟：时钟；
建造师(
@注入（容器\u令牌）私有parentCollectionView:ContainerInterface
) { }
对家长的依赖可能会被消除。你能解释一下你想要达到的目标吗？@maxime1992我在问题的末尾添加了一个更新。谢谢。谢谢！但不是我想的那样。如果你将任务委托给一个对项目一无所知的人，你会告诉他什么？“最终目标是……当我执行此操作时，我希望会发生……”等等。我很确定我们可以提出一个更好的架构，简化它并消除对父组件的依赖，这将是第一行的最佳位置（
const CONTAINER\u TOKEN…
），在哪个文件中？谢谢。这取决于您的项目。我会将所有容器及其令牌放在一个目录中，因为它们是连接的，但全局变量不允许在Angular中使用。对吗？JFYI如果容器有一个基类，该类可以是令牌，则可以将全局汽车与Angular一起使用，但为什么？它会将您的应用限制为打开一个好的书面应用程序可以运行离子或角度通用
import { Component, OnInit } from '@angular/core';

import { Clock } from '../clock';
import { ClockService } from "../clock.service";

@Component({
  selector: 'app-clocks-flow-view',
  templateUrl: './clocks-flow-view.component.html',
  styleUrls: ['./clocks-flow-view.component.scss']
})
export class ClocksFlowViewComponent implements OnInit {

  static selectedClock : Clock | null;
  clocks : Clock[];

  constructor(
    private clockService: ClockService
  ) {
  }

  ngOnInit() {
    this.getClocks();
  }

  getClocks(): void
  {
    this.clockService.getClocks()
      .subscribe(clocks => this.clocks = clocks);
  }
}

core.js:38781 Angular is running in the development mode. Call enableProdMode() to enable the production mode.
ClocksDataGridComponent.html:4 ERROR NullInjectorError: StaticInjectorError(AppModule)[ClockViewComponent -> ClocksFlowViewComponent]: 
  StaticInjectorError(Platform: core)[ClockViewComponent -> ClocksFlowViewComponent]: 
    NullInjectorError: No provider for ClocksFlowViewComponent!
    at NullInjector.get (http://localhost:4200/vendor.js:39072:27)
    at resolveToken (http://localhost:4200/vendor.js:53990:24)
    at tryResolveToken (http://localhost:4200/vendor.js:53916:16)
    at StaticInjector.get (http://localhost:4200/vendor.js:53766:20)
    at resolveToken (http://localhost:4200/vendor.js:53990:24)
    at tryResolveToken (http://localhost:4200/vendor.js:53916:16)
    at StaticInjector.get (http://localhost:4200/vendor.js:53766:20)
    at resolveNgModuleDep (http://localhost:4200/vendor.js:64953:29)
    at NgModuleRef_.get (http://localhost:4200/vendor.js:66019:16)
    at resolveDep (http://localhost:4200/vendor.js:66550:45)
View_ClocksDataGridComponent_1 @ ClocksDataGridComponent.html:4
logError @ core.js:45546
handleError @ core.js:6066
(anonymous) @ core.js:41058
invoke @ zone-evergreen.js:359
run @ zone-evergreen.js:124
runOutsideAngular @ core.js:39572
tick @ core.js:41055
(anonymous) @ core.js:40893
invoke @ zone-evergreen.js:359
onInvoke @ core.js:39699
invoke @ zone-evergreen.js:358
run @ zone-evergreen.js:124
run @ core.js:39511
next @ core.js:40890
schedulerFn @ core.js:35336
__tryOrUnsub @ Subscriber.js:185
next @ Subscriber.js:124
_next @ Subscriber.js:72
next @ Subscriber.js:49
next @ Subject.js:39
emit @ core.js:35298
checkStable @ core.js:39642
onHasTask @ core.js:39719
hasTask @ zone-evergreen.js:411
_updateTaskCount @ zone-evergreen.js:431
_updateTaskCount @ zone-evergreen.js:264
runTask @ zone-evergreen.js:185
drainMicroTaskQueue @ zone-evergreen.js:559
Promise.then (async)
scheduleMicroTask @ zone-evergreen.js:542
scheduleTask @ zone-evergreen.js:381
scheduleTask @ zone-evergreen.js:211
scheduleMicroTask @ zone-evergreen.js:231
scheduleResolveOrReject @ zone-evergreen.js:845
then @ zone-evergreen.js:955
bootstrapModule @ core.js:40600
./src/main.ts @ main.ts:11
__webpack_require__ @ bootstrap:79
0 @ main.ts:18
__webpack_require__ @ bootstrap:79
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.js:1
ClocksDataGridComponent.html:4 ERROR CONTEXT DebugContext_ {view: {…}, nodeIndex: 2, nodeDef: {…}, elDef: {…}, elView: {…}}
View_ClocksDataGridComponent_1 @ ClocksDataGridComponent.html:4
logError @ core.js:45546
handleError @ core.js:6071
(anonymous) @ core.js:41058
invoke @ zone-evergreen.js:359
run @ zone-evergreen.js:124
runOutsideAngular @ core.js:39572
tick @ core.js:41055
(anonymous) @ core.js:40893
invoke @ zone-evergreen.js:359
onInvoke @ core.js:39699
invoke @ zone-evergreen.js:358
run @ zone-evergreen.js:124
run @ core.js:39511
next @ core.js:40890
schedulerFn @ core.js:35336
__tryOrUnsub @ Subscriber.js:185
next @ Subscriber.js:124
_next @ Subscriber.js:72
next @ Subscriber.js:49
next @ Subject.js:39
emit @ core.js:35298
checkStable @ core.js:39642
onHasTask @ core.js:39719
hasTask @ zone-evergreen.js:411
_updateTaskCount @ zone-evergreen.js:431
_updateTaskCount @ zone-evergreen.js:264
runTask @ zone-evergreen.js:185
drainMicroTaskQueue @ zone-evergreen.js:559
Promise.then (async)
scheduleMicroTask @ zone-evergreen.js:542
scheduleTask @ zone-evergreen.js:381
scheduleTask @ zone-evergreen.js:211
scheduleMicroTask @ zone-evergreen.js:231
scheduleResolveOrReject @ zone-evergreen.js:845
then @ zone-evergreen.js:955
bootstrapModule @ core.js:40600
./src/main.ts @ main.ts:11
__webpack_require__ @ bootstrap:79
0 @ main.ts:18
__webpack_require__ @ bootstrap:79
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.js:1
client:52 [WDS] Live Reloading enabled.

const CONTAINER_TOKEN = new InjectionToken<ContainerInterface>('Container Token');
....
@Component({
...
providers: [{provide: CONTAINER_TOKEN, useExisting: ClocksFlowViewComponent }]
})
export class ClocksFlowViewComponent {
}
...
@Component({
...
providers: [{provide: CONTAINER_TOKEN, useExisting: ClocksDataGridComponent }]
})
export class ClocksDataGridComponent {
}
...
export class ClockViewComponent implements OnInit {

  @Input() clock: Clock;

  constructor(
    @Inject(CONTAINER_TOKEN ) private parentCollectionView: ContainerInterface
  ) { }