Angular 2：从不同的组件切换 sidenav答案

【问题标题】：Angular 2: Toggle sidenav from different ComponentAngular 2：从不同的组件切换 sidenav
【发布时间】：2017-06-10 18:33:32
【问题描述】：

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

这是服务：

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>

【问题讨论】：

您是否使用setSidenav 函数设置对侧导航的引用？如果是这样，您能否发布这部分代码？
你能把InstellingenComponent.ts文件的内容贴出来吗？
hmmm..我在 InstellingenComponent.ts 中没有任何相关内容...我忘记了什么吗？
sidenav 服务需要对应用程序中的侧导航的引用，以便它可以打开/关闭它。 InstellingenComponent 组件需要这样做，因为这是具有 sidenav 的组件。请参考我的回答，看看是否能解决您的问题。

标签： angular material-design angular2-services

【解决方案1】：

您需要在 sidenav 服务中设置对 sidenav 的引用，以便服务可以打开/关闭 sidenav。否则，永远是undefined

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

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

在您的构造函数中，注入如下所示的 SidenavService（注意，将其添加到您可能已经拥有的那些中）

  public constructor(
    private sidenavService: SidenavService
  )

确保该类实现OnInit，如下所示。
export class InstellingenComponent implements OnInit

最后，在您的 ngOnInit() 函数中（如果不存在则添加新的），像这样设置对 sidenav 的引用：

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

【讨论】：

啊哈！那行得通！感谢您的帮助。我发现 Angular 非常困难，但并没有放弃 :)

【解决方案2】：

以防万一其他人碰巧在同一条船上：

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

应该是：

import {MdSidenav, MdDrawerToggleResult} from "@angular/material";

不要忘记在 Promise 中也更改它。

我正在使用

"@angular/material": "^2.0.0-beta.10"

顺便说一句，@CodeWarrior 的回答是正确的。它也帮助了我。

【讨论】：

【解决方案3】：

在下面的服务切换函数中 this.sidenav 是未定义的。

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

【讨论】：