如何否定 html 模板中的隐藏指令？

Posted 2023-02-23

【中文标题】如何否定 html 模板中的隐藏指令？

【英文标题】：How can I negate hidden directive in html template?

【发布时间】：2017-04-09 18:13:25

【问题描述】：

在 Ionic2 组件中，我使用 html 模板中的 [hidden] 指令。 @Component 定义为：

@Component(
  selector: 'login-button',
  template:
    `<button ion-button round (click)="openLogin()" [hidden]="loggedIn">
        Login
        <ion-icon name="arrow-up"></ion-icon>
      </button>

      <button ion-button icon-only menuToggle [hidden]="!loggedIn">
        <ion-icon name="menu"></ion-icon>
      </button>
    `
)

我声明了一个组件变量：

export class LoginButton 

  loggedIn: boolean = false;

[hidden]="loggedIn" 正在工作。无论登录变量的值如何，[hidden]="!loggedIn" 都会显示按钮。

我该怎么写？

【问题讨论】：

我只想补充一点，当需要表演时，使用*ngIf 而不是hidden 似乎是个好习惯："the fastest code is code that is not run and the fastest DOM is DOM that doesn’t exist"（Angular2 官方参考here）。跨度>

【参考方案1】：

您可以使用*ngIf 声明。示例：

    <div *ngIf = "loggedIn">
          <button ion-button round (click)="openLogin()">
            Login
            <ion-icon name="arrow-up"></ion-icon>
          </button>
    </div>
    <div *ngIf = "!loggedIn">
          <button ion-button icon-only menuToggle>
            <ion-icon name="menu"></ion-icon>
          </button>
    </div>

--------------> Edit

          <button ion-button round (click)="openLogin()" [hidden]="hideLogin1()">
            Login
            <ion-icon name="arrow-up"></ion-icon>
          </button>



          <button ion-button icon-only menuToggle [hidden]="hideLogin2()">
            <ion-icon name="menu"></ion-icon>
          </button>
-----------------------------
export class LoginButton 
        hideLogin1()
            return true;
           

        hideLogin2()
            return false;
        

【讨论】：

这是有效的。谢谢。但我寻找隐藏指令的解决方案。我知道它有效……只是在这种情况下不行。

用功能试试这个方法： hideDiv1() return true; hideDiv2() 返回假；

`

好的。这是一种方式。

Burhan Gül，有了这个答案，当openLogin() 完成时，您将如何更改可见性状态？

【参考方案2】：

我可以建议您尝试解释here 的第一个错误吗？

另外，在Ionic2中你还可以使用showWhen和hideWhen（文档here），能满足你的需要吗？

【讨论】：

第一个是对我的问题的正确解释。第二个似乎只适用于平台和屏幕方向。

那么，您是否认为 Ionic CSS（或您的）具有低特异性，并且会被 display : none; 属性意外覆盖，由 hidden 属性解决？对我来说，这是有道理的。

对不起，我误解了showWhen和hideWhen的签名。我认为platforms 只是构建步骤提供的布尔值。