DI和transclusion

Question

我有三个组件，其中componentC显示为componentB的内容，并在其构造函数中获取componentB DI。

@Component({
  selector: 'componentA',
  template: `
    <componentB>
        <componentC></componentB>
        <ng-content></ng-content>
    </componentB>`
....
export class ComponentC {
    constructor(private cmpB: ComponentB)

现在我使用其他组件中的componentA，并希望通过我componentC＆＃39;中<ng-content>的{​​{1}}使用翻译为其提供额外的componentA。模板：

<componentA>
    <componentC></componentC>
</componentA>

这会触发No provider for ComponentB。使用<ng-content>，我定义了内容应该出现在<componentB>内，因此DI应该能够找到作为插入点父节点的ComponentB对象。

这种情况可能吗？ Angular是否直接在目标位置创建我的额外ComponentC，或者首先在标记位置移动它？有没有办法配置提供程序来执行此操作？

Answer 1

转换不会使componentC成为componentB的孩子，它仍然是componentA的孩子，只是在DOM中显示的位置被更改。

我没有看到一种简单的注射方法。

您可以componentA提供componentA分配对componentB

的引用的服务

@Component({
  ...
  providers: [ComponentBProviderService],
class ComponentA {
  @ViewChild(ComponentB) componentB:ComponentB;
  constructor(private bProvider: ComponentBProviderService){}
  ngAfterViewInit() {
    this.bProvider.component = this.componentB;
  }
}

当ComponentC注入此服务时，它将可以访问componentB。 在服务中使用Observable是有意义的，以便在引用可用时主动通知componentC。

class ComponentC {
  componentB:ComponentB;
  constructor(bProvider: ComponentBProviderService){
    bProvider.componentAvailable.subscribe(val => this.componentB = val);
  }
}