переменные доступа Angular2 из другого компонента

Question

Попробованная EventEmitter, но не случайно и так мало документации ... Любая помощь приветствуется

У меня есть компонент, называемый боковой панели и еще один под названием заголовок, при нажатии на кнопку из заголовка, он должен скрыть боковую панель ... Как бы вы достигли этого в угловом2?

спасибо

Answer 1

Это довольно легко с Сервисом, который вы разделяете между вашими Компонентами.

Для экземпляра SidebarService:

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

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

В компоненте боковой панели просто поставить *ngIf с showSidebar переменной из SidebarService. Также не забудьте добавить службу в конструктор.

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

    } 
} 

В компоненте, где вы хотите, чтобы справиться с переключая боковой панели также впрыскивать SidebarService и добавить click событие с помощью метода обслуживания.

@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) { 

    } 
} 

Не забудьте добавить SidebarService к поставщикам в вашем файле загрузки:

bootstrap(App, [SidebarService]) 

---

Plunker, например, использование