Angular2从另一个组件访问变量

Posted 2023-03-05

【中文标题】Angular2从另一个组件访问变量

【英文标题】：Angular2 access variables from another component

【发布时间】：2016-09-16 10:45:54

【问题描述】：

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

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

谢谢

【问题讨论】：

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

【参考方案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，因为这就是您保存和更改侧边栏状态的方式。这个例子只是为了展示它在理论上是如何工作的。