2

如何从另一个组件切换 sidenav？

当按钮/触发器与sidenav在同一个.html文件中时，它工作得很好，但如果我生成一个新组件，在我的例子中，我将它们命名为“sidebar-left”和“topbar”，它不起作用.

我所做的是生成组件来分离它们。我将sidenav放在“sidebar-left”组件中，将按钮/触发器放在“topbar”组件中。

侧边栏-left.component.html

<mat-sidenav-container>

    <mat-sidenav #sidenav mode="side" [(opened)]="opened" opened>
        <h3>Sidenav</h3>
    </mat-sidenav>

    <mat-sidenav-content>
        <app-dashboard></app-dashboard>
    </mat-sidenav-content>

</mat-sidenav-container>

topbar.component.html

<mat-toolbar>
    <button (click)="sidenav.toggle()" mat-raised-button>Toggle Sidenav</button>
</mat-toolbar>

无论我在应用程序中的哪个位置触发它，我都希望能够触发 sidenav。

当我按下切换按钮时，我遇到了这个错误：

TopbarComponent.html:1 ERROR TypeError: Cannot read property 'toggle' of undefined
    at Object.eval [as handleEvent] (TopbarComponent.html:2)
    at handleEvent (core.js:43993)
    at callWithDebugContext (core.js:45632)
    at Object.debugHandleEvent [as handleEvent] (core.js:45247)
    at dispatchEvent (core.js:29804)
    at core.js:42925
    at HTMLButtonElement.<anonymous> (platform-browser.js:2668)
    at ZoneDelegate.invokeTask (zone-evergreen.js:391)
    at Object.onInvokeTask (core.js:39680)
    at ZoneDelegate.invokeTask (zone-evergreen.js:390)

这是我不工作的 StackBlitz 代码

4

1 回答 1

3

组件之间有三种可能的通信方式。您收到的错误是因为您的组件中没有 sidevav 属性，并且未在未定义的成员上声明任何切换函数。

您可以通过特定方式在组件之间进行通信。

使用本机事件驱动的通信。

父母通过输入（值）传递给孩子，孩子通过输出（事件）传递给父母。

  //this is how to create an event emitter
  @Output() toggle: EventEmitter<any> = new EventEmitter();

  constructor() { }

  emit() {
      this.toggle.emit(null);
  }
  • 在您的TopbarComponent 中添加上面的代码。

  • 在您的AppComponent 中，您绑定到切换

并在 ts 文件中创建切换功能

toggle() {
     this.firstSelected = !this.firstSelected;
}

然后将第一个选定的值传递给组件并相应地隐藏取消隐藏。

这是官方的方式。在此处检查此解决方案在stackblitz上的工作

使用事件服务

您可以创建一个事件服务，您可以从中引发事件，并且切换主机可以订阅它们并在应用程序范围内切换。例如在这里检查

使用库通过商店共享状态

在此处查看文档

于 2019-10-30T08:39:45.197 回答