Question

我们构建了一个通用的主 - 详细信息组件，它将根据提供的@Input EntityType属性呈现特定的详细信息组件。在主详细信息组件模板中，我们调用一个包装器/工厂组件，它将根据entityType呈现相应的详细信息组件：

@Component({
  selector: 'master-detail',
  template: `
    <div>
      <grid></grid>
      <detail-wrapper> [entityType]=entityType></detail-wrapper>
    </div>
  `,
})
export class MasterDetailComponent {
  @Input() entityType: string ;
  ...
}

@Component({
  selector: 'detail-wrapper',
  template: `
    <ng-container [ngSwitch]="entityType">
      <comp-a *ngSwitchCase="'A'"></comp-a>
      <comp-b *ngSwitchCase="'B'""></comp-b>
      <comp-default *ngSwitchDefault></comp-default>
    </ng-container>
  `,
})
export class DetailWrapperComponent {
  @Input() entityType: string ;
  ...
}

细节组件本身可以包含另一个主细节组件（如俄语玩偶）。但是，当发生这种情况时，由于循环依赖性，我的代码不会运行：

master-detail -> detail-wrapper -> compA -> master-detail

我知道我可以通过使用继承为每个级别创建重复项来打破循环依赖：

export class MasterDetailLevel2Component extends MasterDetailComponent {...}
export class CompALevel2Component extends CompAComponent {...}

但这确实看起来不是一个合适的解决方案，并且涉及为每个递归级别创建类。

我看到的另一种可能性是使用ComponentFactoryResolver而不是DetailWrapperComponent。然后将为MasterDetailComponent提供组件工厂接口（因此删除具体实现之间的链接）。但是通过这个解决方案，我放弃了模板绑定。

有没有更好的方法摆脱这种情况？

Answer 1

我发现的最佳解决方案是在我的master-detail组件中使用@ContentChild，并使用来自父组件的详细模板注入它。这样我摆脱了循环依赖，也使我的组件更加灵活。这是一篇非常好的文章：

rnn cell source

角色循环依赖与＆＃34;俄罗斯娃娃＆＃34;组件

1 个答案: