Angular2从另一个组件访问变量答案

【问题标题】：Angular2 access variables from another componentAngular2从另一个组件访问变量
【发布时间】：2016-09-16 10:45:54
【问题描述】：

尝试了 EventEmitter，但没有机会，文档也很少...任何帮助表示赞赏

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

谢谢

【问题讨论】：

你应该为侧边栏创建一个服务并引导它，然后将其注入任何组件并通过服务更改属性，here is an almost similar problem

标签： variables events binding angular

【解决方案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) {

  }
}

在要处理侧边栏切换的组件中，还注入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 示例用法

【讨论】：

感谢演示，它可以工作，但我无法在标题中导入侧边栏。两者都是由 AppComponent 导入的，我想将它们分开。您还有其他解决方案吗？
您可以随心所欲地进行操作，这一切都围绕着SidebarService，因为这就是您保存和更改侧边栏状态的方式。这个例子只是为了展示它在理论上是如何工作的。