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例如用法

Angular2从另一个组件访问变量

1 个答案: