J'ai des difficultés à obtenir un déclencheur d'un composant "enfant" pour déclencher un ngif dans l'app.component.ts.
Je vais essayer d'expliquer la structure du projet.
Dans app.component.html, ma sortie de routeur est définie comme ceci:
<app-menu *ngIf="toggle"></app-menu>
J'ai aussi un composant de menu, qui est inclus comme ceci.
<router-outlet></router-outlet>
L'utilisateur fournit ses informations d'identification dans le composant login.ts, ce composant génère un nouveau menu, pour cet utilisateur. Voici où se situe le problème, je ne suis pas en mesure de déclencher le ngIf dans app.ts à partir de login.ts. Lorsque j'actualise la page, j'obtiens le bon menu.
4 Réponses :
Créez une liaison parent-enfant pour renvoyer un paramètre à app.ts en fonction d'un événement qui se produit dans login.ts .
Consultez la documentation Angular d'interaction avec les composants.
Serait-il correct d'appeler login.ts un enfant de app.ts (où se trouve le routeur)?
Oui, je ne sais pas trop à quoi ressemble la structure de votre composant, mais je suppose qu'il n'y a pas de relation parent directe -> enfant entre app.ts et login.ts < / code> à cause de votre commentaire. Vous pouvez simplement créer plusieurs liaisons de haut en bas dans la hiérarchie des composants, ou vous pouvez créer un "Service" qui est injecté dans app.ts . angular.io/tutorial/toh-pt4 . Vous finirez par injecter le service dans les deux composants qui auront besoin de la variable. Définissez la variable dans un et lisez dans un autre.
Ajoutez une variable de modèle à votre app.component.html:
export class AppComponent {
@ViewChild('menu') menu;
// this is how you'll access toggle to get it to work with your code.
get toggle() {
return this.menu.toggle;
}
}
Dans votre app.component.ts , vous ' Je souhaite accéder à l'enfant en utilisant @ViewChild () a> décorateur:
<router-outlet></router-outlet> <app-menu *ngIf="toggle" #menu></app-menu> <!-- Please note the template variable! -->
J'espère que ça aide!
J'ai eu d'autres problèmes, donc je n'ai pas pu tester cela avant maintenant. Est-ce que je me suis trompé lorsque je suppose que je peux accéder à la bascule à partir de n'importe quel composant? Quand j'essaye d'y accéder à partir de login.ts, il me dit juste que je "core.js: 1671 ERREUR TypeError: Impossible de définir la propriété 'toggle' de undefined"
La meilleure façon serait d'implémenter un BehaviorSubject dans un service auquel l'app.component peut s'abonner. L'abonné surveille les modifications qui y sont apportées et vous pouvez mettre à jour le composant en conséquence
Un exemple peut être consulté sur https://stackblitz.com/edit / angular-login-using-behavior-subject
J'ai eu un problème similaire où le composant ngIf ne se chargeait pas dans dom même si c'est vrai. exemple de stackblitz https://stackblitz.com/edit/angular-error- quand-le-composant-enfant-a-ngif
l'a résolu en ajoutant le composant viewChild