Question

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

@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>'
})

角度：* ngFor在父组件或子组件中？

1 个答案: