Angular2 Zugriff Variablen von einer anderen Komponente

Question

Versuchte EventEmitter aber keine Chance und so wenig Dokumentation ... Jede Hilfe willkommen

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

Answer 1

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