Tengo un componente Angular Scroller
<app-scroller></app-scroller>que proporciona un esqueleto para mostrar una matriz de imágenes
<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); } pero esto da como resultado que getImages y, por lo tanto, las sources prometen ejecutarse una y otra vez
¿Hay alguna manera de que pueda enviar datos al componente Scroller solo una vez (por lo tanto, sin usar @Input() )
Use el enlace de propiedad solo para enviar el ID de categoría (perros/gatos) al componente y llame a getImages(cateogryID) solo una vez en el componente secundario.
Componente principal
<app-scroller [categoryId]="catIdProperty"></app-scroller>Componente hijo:
@input() categoryId: string; images: [type here] = [initialization here]; ngOnInit(): void { this.images = this.getImages(categoryId); // Btw, could getImages() reside in the imageService? }Creo que debe llamar a su servicio una vez para obtener la matriz de imágenes y guardarla dentro de su componente como una propiedad,
algo como esto
myService.getData.subscribe(data=> this.catImages = data)Si entiendo su pregunta y la configuro correctamente, está preguntando sobre cómo evitar que una @Input escuche, ¿qué sucede si, en cambio, evita que se emitan datos a esta entrada?
Podría entregar una secuencia observable que emita solo una vez, por ejemplo.
catImages$ = this.catDataFromService$.pipe( take(1), ) <app-scroller [source]="catImages$ | async"></app-scroller>Alternativamente, puede construir su propio Observable y completarlo cuando sea necesario.