Comment le changement de variable parent d'enfants composant?
Cette question est assez simple mais je n'arrive pas à se débarrasser de lui.
J'ai un <header>
dans le template parent et j'ai besoin de disparaître lors de l'affichage d'enfants template par module de routage. Ce que j'attends est l'ajout d'une classe à la balise d'en-tête afin que je puisse le cacher via CSS. C'est ce que j'ai:
app.composante.ts
import { Component } from '@angular/core';
@Component({
selector: 'app',
template: `
<header [class.hidden]="hide">
<h1>My App</h1>
<ul>
<li><a href="/home"></a></li>
<li><a href="/showoff"></a></li>
</ul>
</header>
<router-outlet></router-outlet>
`
})
export class AppComponent {
hide = false; //<-- This is what I need to change in child component
}
application de routage.le module.ts
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './welcome.component';
import { ShowOffComponent } from './show.off.component';
const routes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'showoff', component: ShowOffComponent },
];
export const AppRouting = RouterModule.forRoot(routes, {
useHash: true
});
spectacle.offf.composante.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-showoff',
template: `
<h2>Show Off</h2>
<div>Some contents...</div>
`
})
export class ShowOffComponent {
hide = true; //<-- Here is the problem.
//I don't have any idea how to reach parent variables.
}
OriginalL'auteur Mdkusuma | 2017-01-16
Vous devez vous connecter pour publier un commentaire.
Vous pouvez utiliser de sortie de l'émetteur
Dans votre composant enfant,
Dans le parent,
le droit.. il ya beaucoup de façons de la communication parent-enfant selon les docs en fonction des scénarios spécifiques.
Merci, mais le
onHide()
argument sur le composant parent ne fait rien dans ce cas. Je l'ai testé à l'aide de simples alerte sur les deuxsetHide()
etonHide()
. Lorsque(click)
gestionnaire déclenchée, seulementsetHide()
montrant alerte. Et puis je me rends compte que cela ne peut pas être mis en œuvre à l'aide de module de routes après j'ai trouvé [ce] (stackoverflow.com/questions/35878762/...).ok.. si Vous avez besoin d'utiliser un service commun. ici
Eh bien, ça marche!!! Mais, pour que le service de travail, il m'a demandé de définir
<app-showoff [onHide]="hide"></app-showoff>
à l'intérieur de routeur-outlet qui n'est pas grand, comme il fait le modèle existe toujours, même quand j'ai changer l'itinéraire.En outre, en utilisant le service est le moyen le plus complexe à réaliser cela, depuis que j'ai juste besoin de définir une variable de type vrai/faux, pas de communication bi-directionnelle.OriginalL'auteur Suraj Rao
Dans votre
app.component.ts
vous pouvez vérifier votre URL et définirhide
valeur de la variable en tant que ci-dessous :OriginalL'auteur ranakrunal9
J'ai croisé les mêmes phénomènes à très récemment Angulaire 6.
Je voulais d'accès et de modification d'une variable qui appartient à un parent ou un grand-parent du Composant. Voir l'image ci-dessous. Je veux accéder et de modifier une variable qui appartient à Tom, à partir de Jim (qui est un enfant de Tom) et Sara (qui est un petit-fils de Pierre).
Il y a peut être d'autres solutions, mais l'approche que j'ai utilisée pour résoudre ce problème est d'utiliser
ViewContainerRef
. J'ai injecter leViewContainerRef
à l'Enfant du composant constructeur, que j'ai besoin d'accéder au Composant parent, et traversé par le nœud parent (ou nœuds) pour trouver la variable parent.Injection pour le constructeur,
L'accès et la traversée à travers le nœud parent,
J'ai fait un StackBlitz exemple avec le scénario que je vous ai donné dans le tableau ci-dessus.
https://stackblitz.com/edit/angular-comms
Espère que quelqu'un va trouver cela utile.
Merci.
Je suis heureux que vous ayez trouvé ma réponse utile 🙂
OriginalL'auteur Anjana Silva