2016-05-19 5 views
4

Versuchte EventEmitter aber keine Chance und so wenig Dokumentation ... Jede Hilfe willkommenAngular2 Zugriff Variablen von einer anderen Komponente

Ich habe eine Komponente namens Sidebar und eine weitere namens Header, wenn Sie auf eine Schaltfläche aus dem Header klicken, es sollte die Seitenleiste verstecken ... Wie würdest du das in angular2 erreichen?

danke

+0

Sie einen Dienst für das schaffen sollte Sidebar und Bootstrap es, dann injizieren Sie es in einer beliebigen Komponente und ändern Sie die Eigenschaften durch die s service, [hier ist ein fast ähnliches Problem] (http://stackoverflow.com/questions/37069609/show-loading-screen-when-navigating-between-routes-in-angular-2/37070282#37070282) –

Antwort

6

Dies ist ziemlich einfach mit einem Service, den Sie zwischen Ihren Komponenten teilen.

Zum Beispiel eines SidebarService:

@Injectable() 
export class SidebarService { 
    showSidebar: boolean = true; 

    toggleSidebar() { 
    this.showSidebar = !this.showSidebar; 
    } 
} 

In der Sidebar Komponente legen sie lediglich ein *ngIf mit dem showSidebar Variable aus den SidebarService. Vergessen Sie auch nicht, den Dienst im Konstruktor hinzuzufügen.

@Component({ 
    selector: 'sidebar', 
    template: ` 
     <div *ngIf="_sidebarService.showSidebar">This is the sidebar</div> 
    `, 
    directives: [] 
}) 
export class SidebarComponent { 
    constructor(private _sidebarService: SidebarService) { 

    } 
} 

In der Komponente, in dem Sie die Hin- und Herschalten der Sidebar behandeln wollen auch die SidebarService injizieren und das click Ereignis mit der Service-Methode hinzufügen.

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 
     <button (click)="_sidebarService.toggleSidebar()">Toggle Sidebar</button> 
     <sidebar></sidebar> 
    </div> 
    `, 
    directives: [SidebarComponent] 
}) 
export class App { 
    constructor(private _sidebarService: SidebarService) { 

    } 
} 

Vergessen Sie nicht die SidebarService zu den Anbietern in der Bootstrap hinzuzufügen:

bootstrap(App, [SidebarService]) 

Plunker zum Beispiel Nutzung

+0

Danke für die Demo, es funktioniert, aber ich kann die Sidebar in der Kopfzeile nicht importieren. Beide werden von der AppComponent importiert und ich möchte die Dinge getrennt halten. Hast du eine andere Lösung? – kfa

+0

Sie können es tun, wie Sie möchten, es dreht sich alles um den 'SidebarService', denn so speichern und ändern Sie den Status der Seitenleiste. Das Beispiel sollte nur zeigen, wie es theoretisch funktioniert. – rinukkusu