0

我正在尝试创建组件的层次结构。有一个全局的“CONTEXT”对象（在 NgModule 级别提供），但我希望一个组件能够为他们的孩子覆盖这个对象。“CONTEXT”对象目前是通过注入获得的，像这样：

NgModule           ---> Provides default "CONTEXT" for injection
<comp1>
   <comp2>
       <comp3>     ---> Overrides CONTEXT.someProp
           <comp4>
               <comp5>
               <comp5>
           <comp4>
       <comp3>
   <comp2>
<comp1>

没有组件知道其他组件的存在（它们是动态创建的），但 comp3 应该能够控制/更改哪些上下文“看到”其指定的子级（在本例中为 comp4 和 comp5）。

我猜注入在这里不是最好的模式（我该怎么做？comp3 应该扩展 CONTEXT 吗？），至少因为它是伪静态的（Angular 可以在创建后检测并传播设置的更改吗？）。也许 Observable 可以在这里提供帮助。

我已经看到了这个答案，但我认为情况并非如此。

实现这一目标的最佳方法是什么？我想避免使用显式的 @Input 属性，因为中间组件应该尽可能不可知。这里有一个共同的模式可以遵循吗？

4

1 回答 1

0

严格的组件层次结构表明这可以通过分层注入器来解决。

可以在子注入器中指定需要在不同组件中进行不同配置的提供程序，以便重新实例化。对提供者配置的需求表明应该有另一个配置提供者（有关配置配方，请参阅此答案）。例如，具有强制配置的提供程序，如身份验证服务：

export const SOME_CONFIG = new InjectionToken('someConfig');

@Injectable
export class SomeService {
  config: IConfig;
  constructor(@Optional() @Inject(SOME_CONFIG) someConfig) {
    this.config = {
      /* default config goes here */,
      ...someConfig
    };
  }

  updateConfig(config) {
    return Object.assign(this.config, config);
  }

  ...
}

@NgModule({
  ...
  providers: [
    SomeService,
    { provide: SOME_CONFIG, useValue: { /* global config */ }
  ] 
})
export class AppModule {}

并且可以使用组件的另一种配置创建一个新实例：

@Component({
  providers: [
    SomeService,
    { provide: SOME_CONFIG, useValue: { /* local config */ }
  ] 
})
class FooComponent {...}
于 2018-02-20T14:19:27.857 回答