如何只向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);
}

但这导致CCD_ 1和因此CCD_

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

Answer 1

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

像这个

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

Answer 2

如果我正确理解您的问题和设置，您询问的是关于阻止@Input侦听的问题，那么如果您阻止数据发送到此输入呢？

你可以发送一个只发出一次的可观察流，例如

catImages$ = this.catDataFromService$.pipe(
take(1),
)
<app-scroller [source]="catImages$ | async"></app-scroller>

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

Answer 3

只使用属性绑定将类别id(dogs/cats(发送到组件，并且只在子组件中调用getImages(cateogryID(一次。

母组件

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

子组件：

@input()
categoryId: string;
images: [type here] = [initialization here];

ngOnInit(): void {
this.images = this.getImages(categoryId); // Btw, could getImages() reside in the imageService?
}