variables - Angular2 从另一个组件访问变量

Question

尝试过 EventEmitter，但没有机会，而且文档太少......感谢任何帮助

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

谢谢

Answer 1

使用您在组件之间共享的服务，这非常容易。

例如一个SidebarService:

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

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

在您的侧边栏组件中，只需将 *ngIf 与 SidebarService 中的 showSidebar 变量放在一起。也不要忘记在构造函数中添加服务。

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

  }
}

在要处理侧边栏切换的组件中，还需要注入(inject) 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 中的提供者:

bootstrap(App, [SidebarService])

---

Plunker for example usage