Jak udostępnić dane z komponentu nadrzędnego do wielu komponentów podrzędnych w Angular?

0
Anji Sattineedi 11 czerwiec 2021, 13:28

3 odpowiedzi

Najlepsza odpowiedź

Możesz także użyć Tematu i subskrybować go z wielu komponentów.

Komponent nadrzędny

constructor(private event:serviceFile){}
eventSubscriber:Subscription|any;
data:any;    //<- data that you want to send to child component
ngOnInit(){
  this.event.sendDataToChildComponent(data);  //<- Function inside service
}

Plik usługi

subjectName = new Subject<any>();
sendDataToChildComponent(data:any){
    this.subjectName(data).next();
}

Komponent podrzędny

constructor(private event:serviceFile){}
eventSubscriber:Subscription|any;
ngOnInit(){
   this.event.subjectName.subscribe((data:any)=>{
       console.log(data)
   }
}
ngOnDestroy(){
     if(this.eventSubscriber)this.eventSubscriber.unsubscribe();
}
0
Pankaj Verma 11 czerwiec 2021, 15:23

Wszystkie komponenty podrzędne otrzymują swoje dane od rodzica poprzez dekorator @Input. Zadeklarowanie zmiennej z dekoratorem w potomku pozwala na przekazanie wartości z rodzica w szablonie HTML.

Więcej na ten temat znajdziesz w dokumencie: https://angular.io/guide/inputs-outputs

A także możesz wysłać dane z powrotem do rodzica przez dekorator @Output (zdarzenia).

0
Daniel Stefanelli 11 czerwiec 2021, 10:31

Możesz utworzyć usługę, używając tej usługi do udostępniania danych z dowolnym komponentem, który ci się podoba lub lepszym podejściem będzie użycie @Input() w twoich komponentach potomnych, aby otrzymać dane z ich komponentu nadrzędnego

0
Gp Sidhu 11 czerwiec 2021, 10:30