如何在没有父子关系的两个组件之间进行通信？

Question

app.component.ts 是我的 Angular 2 应用程序的入口点。它包含两个组件：一个标题和一个sidenav。

@Component({
  selector: 'app-root',
  template: `
    <app-header></app-header>

    <app-sidenav></app-sidenav>
  `
})
export class AppComponent { }

这是我想要实现的目标：在 <app-header> 组件内，我有一个（菜单）按钮，它应该会触发 <app-sidenav> 组件的打开。

换句话说，<app-header> 中按钮的点击事件应该触发<app-sidenav> 组件内的open() 方法。

• header.component.ts：

  @Component({
    selector: 'app-header',
    template: `
      <button (click)="onSidenavOpen()">Menu</button>
    `
  })
  export class HeaderComponent {
    constructor() { }
  
    onSidenavOpen() {
      // trigger the opening of the <app-sidenav> component
    }
  }
  

• sidebar.component.ts：

  @Component({
    selector: 'app-sidenav',
    template: `
      <md-sidenav #sidenav>
        // bla bla, sidebar
      </md-sidenav>
    `
  })
  export class SidenavComponent {
    constructor() { }
  
    open(sidenav) {
      sidenav.open();
    }
    close(sidenav) {
      sidenav.close();
    }
  }
  

我阅读了 Angular 2 文档中的 component interaction section，但我正在努力寻找在这两个组件之间进行通信的最佳方法。我的总体意图是为每个组件封装尽可能多的逻辑。

您将如何处理我的用例？你会创建一个中间服务吗？请分享一个例子。

Answer 1

您可以使用服务来允许两个独立的组件相互通信。在下面的示例中，HeaderComponent 使用 SidebarService 的 toggleSideNav 方法将值推送到暴露的 Observable。 SidenavComponent 在其初始加载时订阅此 Observable 并将响应推送的新值。

侧边栏服务：

import { Injectable } from "@angular/core"

import { Observable, Subject } from "rxjs/Rx";

@Injectable()
export class SidebarService {

    private sidenavOpenSubject : Subject<boolean>;

    constructor() {
        this.sidenavOpenSubject = new Subject<boolean>();
    }

    toggleSideNav(opening: boolean): void {
        this.sidenavOpenSubject.next(opening);
    }

    onSideNavToggle(): Observable<boolean> {
        return this.sidenavOpenSubject;
    }

}

标头组件：

@Component({
  selector: 'app-header',
  template: `
    <button (click)="onSidenavOpen()">Menu</button>
  `
})
export class HeaderComponent {
  constructor(private sidebarService: SidebarService) { }

  onSidenavOpen() {
    this.sidebarService.toggleSideNav(true);
  }
}

侧边栏组件：

@Component({
  selector: 'app-sidenav',
  template: `
    <md-sidenav #sidenav>
      // bla bla, sidebar
    </md-sidenav>
  `
})
export class SidenavComponent implements OnInit {
    constructor(private sidebarService: SidebarService) { }

    ngOnInit(): void {
        this.sidebarService.onSideNavToggle().subscribe(
            (opening) => {
                if (opening) {
                    //Logic to open the sidenav here
                } else {
                    //Logic to close the sidenav here
                }
            }
        );
    }

    open(sidenav) {
        sidenav.open();
    }

    close(sidenav) {
        sidenav.close();
    }
}

SidebarService 需要在合适的模块中注册（例如您的AppModule）。