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

【问题标题】：How can I negate hidden directive in html template?如何否定 html 模板中的隐藏指令？
【发布时间】：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）。跨度>

标签： html components ionic2 hidden

【解决方案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 只是构建步骤提供的布尔值。