Show/hide md-sidenav 打字稿代码

Question

我有一个打字稿代码和他的模板html

 <button md-icon-button (click)="menuSidenav.toggle()">
        <md-icon>menu</md-icon>
    </button>
....
<md-sidenav-container style="height: 100px">
    <md-sidenav align="start" mode="over" #menuSidenav

如果我点击按钮它会起作用，但我想通过打字稿代码显示和隐藏 sidenav

你好吗？

非常感谢，因为我不知道如何通过打字稿获取元素

Answer 1

在 Angular 中，对于隐藏和显示模板项等简单操作，您不希望直接在打字稿中获取元素。您应该使用内置模板指令 ngIf:

<button md-icon-button (click)="menuSidenav.toggle()">
    <md-icon>menu</md-icon>
</button>
....
<md-sidenav-container style="height: 100px">
    <md-sidenav *ngIf="toggled" align="start" mode="over">

ngIf 指令管理隐藏和显示参数是否为真或假。因此，通过在组件打字稿中使用布尔字段 'toggled'，就像您在上述事件中使用 'toggle' 一样：

class MyComponent... {
    ...
    public toggled = false;

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

文档：https://angular.io/api/common/NgIf

Answer 2

否则，在我的 class 组件中，此解决方案适用于我：

 @ViewChild("menuSidenav") sideNave: any;

在代码中

this.sideNave.open();

你怎么看？

Answer 3

我遇到了同样的问题，这就是我解决问题的方法。

用户 [ngStyle] 没有使用 *ngIf，而是根据您的条件将显示设置为 'block' 或 'none'

Show/hide md-sidenav 打字稿代码

Show/hide md-sidenav by typescript code

angular

angular4-forms