Angular: *ngFor 在父组件或子组件中？

Question

请看下面我的应用墙模板。我想知道我是否应该选择 <app-brick *ngFor="..."></app-brick> 或 <app-bricks> 并在其自己的模板中使用 *ngFor。在这方面是否有最佳实践，还是完全取决于大小写？

@Component({
  selector: 'app-wall',
  template: `
      <app-brick *ngFor="let brick of bricks"></app-brick>

      or

      <app-bricks></app-bricks>
  `
})

@Component({
  selector: 'app-brick',
  template: '<div> I'm a brick! </div>'
})

@Component({
  selector: 'app-bricks',
  template: '<div *ngFor="let brick of bricks"> I'm a brick! </div>'
})

Answer 1

两者都是正确的，根据我的说法，将 bricks 数组传递给子组件并将其显示为 '<div *ngFor="let brick of bricks"> I'm a brick! </div>' 更好，因为子组件只会渲染一次。

parent.ts

<app-bricks [bricks]="bricks"></app-bricks>

child.ts

@Input() bricks : any[]

@Component({
  selector: 'app-bricks',
  template: '<div *ngFor="let brick of bricks"> I'm a brick! </div>'
})

Angular: *ngFor 在父组件或子组件中？

Angular: *ngFor in parent or child component?

design-patterns

parent-child

typescript

angular-components

angular