angular - 通过打字稿代码显示/隐藏 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 中，对于简单的事情，比如隐藏和显示模板项，您不希望直接在 typescript 中获取元素。您应该使用内置的模板指令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指令管理隐藏和显示参数是否计算为真或假。因此，通过在组件打字稿中使用布尔字段“切换”，就像您在上面的事件中使用“切换”一样：

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

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

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

Answer 2

否则，在我的类组件中，此解决方案对我有用：

 @ViewChild("menuSidenav") sideNave: any;

并在代码中

this.sideNave.open();

你怎么看 ？

Answer 3

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

而不是使用 *ngIf，用户 [ngStyle] 并根据您的标准将显示设置为“阻止”或“无”