So ändern übergeordneten Variablen von Kindern-Komponente?
Diese Frage ist ganz einfach, aber ich kann nicht, es loszuwerden.
Ich habe eine <header>
im übergeordneten template und ich muss es verschwinden, wenn die Anzeige Kinder-Vorlage durch routing-Modul. Was ich erwarte ist eine Klasse hinzufügen, um den header-tag, so kann ich es ausblenden über CSS. Dies ist, was ich habe:
app.Komponente.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
}
app-routing.- Modul.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
});
zeigen.offf.Komponente.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.
}
InformationsquelleAutor Mdkusuma | 2017-01-16
Du musst angemeldet sein, um einen Kommentar abzugeben.
Können Sie Ausgang emitter
In Ihrem Kind Komponente,
In der übergeordneten,
richtig.. es gibt viele Möglichkeiten, Eltern-Kind-Kommunikation als pro die Dokumente in Abhängigkeit von bestimmten Szenarien.
Danke, aber die
onHide()
argument auf übergeordnete Komponente hat nichts in diesem Fall. Ich habe es getestet mit einfachen alert auf beidensetHide()
undonHide()
. Wenn(click)
- handler ausgelöst, nursetHide()
zeigt Warnung. Und dann merke ich, das kann nicht umgesetzt werden mit Hilfe der route-Modul nach und nach fand ich [dieses] (stackoverflow.com/questions/35878762/...).ok.. also müssen Sie sich auf einen gemeinsamen Dienst. hier
Gut, es funktioniert! Aber, um den service der Arbeit, er fragte mich, zu definieren
<app-showoff [onHide]="hide"></app-showoff>
innerhalb von router-outlet, die ist nicht so toll, wie es aus der Vorlage noch vorhanden sein, selbst wenn ich die route zu ändern.Außerdem mit service ist die Weise, die schwieriger zu erreichen, da brauche ich nur eine variable auf true/false, nicht bi-direktionale Kommunikation.InformationsquelleAutor Suraj Rao
In Ihrem
app.component.ts
können Sie überprüfen Sie Ihre URL und legen Siehide
Wert der Variablen wie folgt :InformationsquelleAutor ranakrunal9
Ich stieß in das gleiche Phänomen vor kurzem mit Winkel-6.
Wollte ich den Zugriff auf und ändern Sie die Variablen, die gehört einem Elternteil oder einem Großelternteil Komponente. Siehe das Bild unten. Ich möchte den Zugriff auf und ändern Sie die Variablen, die gehört Tom, Jim (wer ist ein Kind von Tom) und Sara (wer ist ein Enkel von Tom).
Möglicherweise gibt es einige andere Lösungen, aber der Ansatz, den ich verwendet haben, um diese zu überwinden, ist die Verwendung
ViewContainerRef
. Ich habe zu injizieren, dieViewContainerRef
um die Untergeordnete Komponente Konstruktor, dass ich Zugriff auf die parent-Komponente und Durchlaufen durch den übergeordneten Knoten (oder der Knoten) zu finden, die übergeordnete variable.Injektion an den Konstruktor,
Zugriff und Traversierung durch den übergeordneten Knoten,
Ich habe eine StackBlitz Beispiel mit dem Szenario, das ich Euch gegeben habe in das obige Bild.
https://stackblitz.com/edit/angular-comms
Hoffe, jemand wird Sie finden diese nützlich.
Danke.
Ich bin froh, dass Sie fand meine Antwort hilfreich 🙂
InformationsquelleAutor Anjana Silva