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指令管理隐藏和显示参数的计算结果是true还是false。因此，通过使用布尔字段＆＃39;切换＆＃39;在您的组件打字稿中，就像您已经使用过＆＃39;切换＆＃39;在上面的事件中：

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

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

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

Answer 2

否则这个解决方案在我的类组件中适用于我：


    <span class="my-class"><a href="@myVariale" target="_blank" >link text</a></span>

并在代码中

<span class="my-class"><a href="@myVariale" target="_blank" >link text</a></span>

您怎么看？

Answer 3

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

而不是使用* ngIf，用户[ngStyle]并根据您的条件设置显示到＆＃39;阻止＆＃39;或者＆＃39;没有＆＃39;

通过打字稿代码显示/隐藏md-sidenav

3 个答案: