如何仅将数据发送到 Angular 组件一次（因为 @Input 一直在监听更新）

Question

我有一个 Angular Scroller 组件

<app-scroller></app-scroller> 

提供用于显示图像数组的骨架

随机分量

<app-scroller [init]="getImages('cats')"></app-scroller>
<app-scroller [init]="getImages('dogs')"></app-scroller>

getImages(src: string) {
  //THIS FUNCTION GETS CALLED AGAIN AND AGAIN
  return {
    aspect: '16/9',
    res: 'min',
    sources: this.imageService.getImagesFromAPI(src)
  };
}

滚动条组件

public movies: string[] = [];
@Input() init: {aspect: string, res: string, sources: Promise<string[]>};

ngOnInit() {
  this.init.sources.then(images => this.movies = movies);
}

但这会导致getImages以及sources Promise 被一遍又一遍地执行

有没有办法我可以只向 Scroller 组件发送一次数据（因此不使用@Input() ）

Answer 1

我相信您需要调用一次服务以获取图像数组并将其作为属性保存在组件中，

像这样的东西

myService.getData.subscribe(data=> this.catImages = data)

Answer 2

如果我正确理解您的问题和设置，您是在询问防止@Input监听，如果您改为阻止数据发送到此输入怎么办？

您可以提供一个仅发射一次的可观察 ZF7B44CFFAFD5C52223D5498196C8A2E7BZ，例如。

catImages$ = this.catDataFromService$.pipe(
  take(1),
)

<app-scroller [source]="catImages$ | async"></app-scroller>

或者，您可以构建自己的 Observable 并在必要时完成它。

Answer 3

仅使用属性绑定将类别 ID（狗/猫）发送到组件，并在子组件中仅调用一次 getImages(cateogryID)。

父组件

<app-scroller [categoryId]="cats"></app-scroller>

子组件：

@input()
categoryId: string;

images: [type here] = [initialization here];


ngOnInit(): void {

  this.images = this.getImages(categoryId);

}