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>' 一样显示它更好，因为子组件只会呈现一次。

父.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>'
})