J'utilise angular 6. Je souhaite envoyer des données (que j'obtiens depuis une API externe) depuis app.component vers d'autres composants (enfants), je ne souhaite pas appeler cet API / service commun dans tous les composants séparément et répétitivement. Je veux l'appeler une fois, c'est pourquoi j'appelle dans app.component.ts
Voici un code de service / API
this.mainService.getBaseModel().subscribe(ret => {
this.basemodel = ret;
}, error => { }, () => {
});
Je veux envoyer ceci ' valeur de basemodel pour tous les composants de mon application. Aidez-moi à le résoudre et à mieux le comprendre. Merci.
3 Réponses :
Il y a deux façons d'y parvenir,
@Input , avec cela, nous pouvons transmettre les données à chaque composant enfant à partir du composant parent . Si vous avez un ou deux composants à partager des données de Parent, utilisez @ Input sinon Service avec les dernières classes RxJs ( BehaviourSubject , Subject , etc.) pourrait être très simple.
si vous voulez suivre @Input, suivez ce post - transmettre les données @input à l'enfant
suivez ceci pour le service avec BehaviourSubject - https://medium.com/@ weswhite / angular-behaviorubject-service-60485ef064fc
Sans connaître la structure de votre application, il est difficile de dire quelle approche utiliser. Vous pouvez utiliser:
@Input () et @Output() Dans la documentation officielle Angular, vous pouvez trouver plusieurs approches pour cela. Ils peuvent être trouvés ici: https://angular.io/guide/component-interaction#pass-data-from-parent-to-child-with-input-binding
Il y a aussi des exemples en direct pour les méthodes ci-dessus ici: https://stackblitz.com/angular/plpgkjondrl