Angular2从另一个组件访问变量

Question

尝试EventEmitter但没有机会和如此少的文档...任何帮助赞赏

我有一个名为sidebar的组件和另一个名为header的组件,当你单击标题中的一个按钮时,它应该隐藏侧边栏...你如何在angular2中实现这一点？

谢谢

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