Question

我有一个根组件app-document-form，它会迭代对象documentBlock的子元素：

<ng-container *ngFor="let element of documentBlock?.children"> <!-- This is important part -->
     <app-adresat-list *ngIf="element.tag === 'ADRESAT'" [parentBlock]="documentBlock"></app-adresat-list>
</ng-container>

如果当前的element是element.tag === 'ADRESAT'，则显示组件app-adresat-list。

组件模板app-adresat-list是：

<app-adresat [parentBlock]="parentBlock" [element]="element" *ngFor="let element of adresatList"></app-adresat>

app-adresat是：

{{element.title}
<div class="document-block__body">
   <app-document-form [documentBlock]="element"></app-document-form>
</div>

app-adresat再次使用app-document-form组件以继续深入结构。

这就是为什么我得到循环依赖的原因：app-document-form-> app-adresat-list-> app-adresat-> app-document-form-> app-adresat-list。

因此，很容易解决从<app-document-form [documentBlock]="element"></app-document-form>中删除app-adresat的问题。但是我需要称呼它是因为app-adresat可以具有应该显示的子元素。

Answer 1

我认为这就是您要寻找的。您可以使用<ng-content></ng-content>标签作为该动态内容的占位符，然后在解析模板时Angular会将其替换为您的内容。

将<ng-content></ng-content>添加到您的组件中，然后将所需的组件传递给该组件。

<app-document>
  <app-addressat ad="address 1">
    <app-addressat ad="address 2">
      <app-document title="document 1">
        <app-addressat ad="address 3"></app-addressat>
      </app-document>
    </app-addressat>
  </app-addressat>
</app-document>

stackblitz example

如何避免组件之间的循环依赖？

1 个答案: