Question

我有一个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>

Answer 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);
  }

Answer 2

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

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

应该是：

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

不要忘记在承诺中改变它。

我正在使用

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

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

Answer 3

在下面的服务切换功能中，this.sidenav未定义。

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

Angular 2：从不同的Component切换sidenav

3 个答案: