Question

一些自定义组件是angular 7应用程序的一部分。在子组件期望单个值或数组的组件中，以下模式很常见。根据标志，组件将呈现所需的布局。以下是一个示例：

<ng-container *ngIf="!arrayFlag">
    <app-some-component ... >
        ...
    </app-some-component>
</ng-container>
<ng-container *ngIf="arrayFlag">
  <app-some-component ...
    *ngFor="let field of fields; let i = index; trackBy:trackByFn">
        ...
  </app-some-component>
</ng-container>

我们是否可以简化这种模式，使组件的内容无需写入两次，一次写入数组，一次写入单个值。例如

<ng-container ... >
  <app-some-component ... >
        ...
  </app-some-component>
</ng-container>

致谢

Answer 1

如果您的组件是这样的“哑巴”（它们没有任何逻辑，则可以使用模板：

<ng-template #child let-arr>
  <child-component *ngFor="let i of arr"></child-component>
</ng-template>

<ng-container *ngTemplateOutlet="child; context: { arr: flag ? [0] : myArray }"></ng-container>

EDIT （简化）：

<app-some-component 
  *ngFor="let field of (flag ? fields : [0]); let i = index; trackBy:trackByFn">
</app-some-component>

角度模板以遍历数组或显示单个元素

1 个答案: