1
votes

Comment mettre à jour la vue d'un autre composant dans Angular 7?

Je voudrais actualiser mon jeu de cartes à partir de la barre de navigation qui fait partie de app.component.html , alors j'ai préparé la fonction refresh () .

Lorsqu'il est appelé, il met à jour la variable Cards mais ne le rend pas dans ngFor sur l'élément html de mainView.html

Il rend l'ensemble mis à jour si j'appelle à partir d'un élément html dans mainView.html (comme (click) = "loadCards ()" ) mais pas si le même ( ( click) = "refresh ()" ) se fait dans app.component.html.

export class AppComponent {
  ...

  constructor(private router: Router, private mMainView: MainView) {}

  refresh(){
    console.log('done');
    this.mMainView.loadCards();
  }
  ...
}

export class MainView implements OnInit {

  constructor(private mMainController: MainController) {}

  Cards: any = [];

  ngOnInit() {
    this.loadCards();
  }

  loadCards() {
    this.mMainController.getAllCards().subscribe(
      (data) => {this.Cards = data); },
      (error) => {},
      () => {console.log(this.Cards));
  }

...
}

Mise à jour

J'ai essayé avec @Input () mais je n'ai pas réussi à le faire fonctionner. J'ai implémenté RefreshService comme expliqué dans la réponse acceptée et je suis maintenant en mesure d'actualiser le contenu d'autres composants.

Merci à tous pour une réponse rapide.

javascript angular

1 commentaires

Je pense que le problème vient de la façon dont vous appelez MainView, qui ne semble pas déclencher de résumé. Je pense que la bonne façon de faire cela serait de passer votre tableau de cartes en tant qu'entrée à votre composant [cards] = cartes , puis de modifier le tableau de cartes directement à partir du composant enfant.

3 Réponses :

0
votes

Vous essayez d'utiliser MainView comme dépendance mais ce n'est pas une dépendance injectable. Essayez d'utiliser des entrées / sorties entre le composant d'application et MainView, si possible. Si MainView n'est pas un enfant d'AppComponent, abstenez-vous de la logique de chargement des cartes dans un service et injectez-la dans les deux.

0 commentaires

0
votes

Vous pouvez implémenter l'interaction des composants de deux manières

(i) Si les composants sont liés les uns aux autres, utilisez la méthode courante et simple de partage de données. Cela fonctionne en utilisant le décorateur @Input() pour permettre aux données d'être transmises via le modèle.

(ii) Si les composants ne sont pas liés les uns aux autres, vous pouvez utiliser un service partagé en utilisant subject to communiquer entre les deux composants

0 commentaires

3
votes

FIST WAY: UTILISER UN SERVICE PARTAGÉ

Vous devez introduire un service qui gère l'état de votre voiture.

Dans ce cas, il peut être utile d'introduire pour cela, un BehaviorSubject comme celui-ci:

Votre service:

actualisation privée: BehaviorSubject = new BehaviorSubject (false);

public refresh(){
    this.myService.setRefresh(true);
}

Dans votre classe MainView - Premièrement: injectez votre service en tant que dépendance - Deuxièmement: abonnez-vous à votre observable à l'intérieur du hook OnInit, par exemple comme ceci:

this.myService.getRefresh().subscribe((value: boolean) => {
    if(value) {

      this.loadCards()
    }

})

Dans votre classe AppComponent

Premièrement: injectez votre service en tant que dépendance
Deuxièmement: définissez la valeur de votre observable dans votre méthode d'actualisation.

Par exemple, quelque chose comme ceci:

public getRefresh(): Observable<boolean> {

   return this.refresh.asObservable();
}

public setRefresh(value: boolean): void {

   this.refresh.next(value);
}

DEUXIÈME FAÇON: UTILISER @Input Decorator pour transmettre la valeur .

0 commentaires