Angular 2 : Toggle sidenav from different Component

Question

我有一个侧导航，我想从不同的组件打开它。我为此创建了一个服务，因为它不是父/子关系，但我不断将导航返回为未定义。我做错了什么？

这是服务:

import {Injectable} from '@angular/core';
import {MdSidenav, MdSidenavToggleResult} from "@angular/material";

@Injectable()
export class SidenavService {
  private sidenav: MdSidenav;

  public setSidenav(sidenav: MdSidenav) {
    this.sidenav = sidenav;
  }

  public open(): Promise<MdSidenavToggleResult> {
    return this.sidenav.open();
  }

  public toggle(isOpen?: boolean): Promise<MdSidenavToggleResult> {
    return this.sidenav.toggle(isOpen);
  }
  constructor() {
  }
}

这是带有 sidenav 的 InstellingenComponent 的 html(我删除了一些内容，因此更具可读性):

<md-sidenav #sidenav align="end" mode="side" opened="true">
  <div>
    <h3>Weergave aanpasssen</h3>
    <section class="instellingen">
             <h3>Kleuren</h3>
      </form>
    </section>
  </div>
  </md-sidenav>

在另一个组件中我有:

export class AppComponent implements OnInit {

  constructor(private sidenavService: SidenavService) {
  }

  ngOnInit(): void {
      }

  public toggleSidenav() {
    this.sidenavService
      .toggle()
      .then(() => {
      });
  } }

和以下 html:

    <button md-icon-button (click)="toggleSidenav()" class="button">
<md-icon>settings</md-icon></button>

Answer 1

您需要在 sidenav 服务中设置对 sidenav 的引用，以便该服务可以打开/关闭 sidenav。否则，它将始终是未定义

为此，请打开 InstellingenComponent.ts 文件(其模板具有侧面导航组件的组件)，并进行以下更改:

添加此行代码以获取对模板中侧面导航组件的引用(最好将其添加到顶部，就在 export class InstellingenComponent 语句下方)
@ViewChild('sidenav') public sidenav: MdSidenav;

在构造函数中，如下所示注入(inject) SidenavService (注意，将其添加到您可能已有的构造函数中)

  public constructor(
    private sidenavService: SidenavService
  )

确保该类实现 OnInit，如下所示。
导出类 InstellingenComponent 实现 OnInit

最后，在您的 ngOnInit() 函数中(如果尚不存在，则添加新函数)，设置对 sidenav 的引用，如下所示:

  public ngOnInit(): void {
    this.sidenavService
      .setSidenav(this.sidenav);
  }