Как я могу скрыть скрытую директиву в html-шаблоне?

В компоненте Ionic2 я использую директиву [hidden] в шаблоне HTML. @Component определение:Как я могу скрыть скрытую директиву в html-шаблоне?

@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" показывает кнопку независимо от значения переменной loggedIn.

Как это написать?

источник

2016-11-25 Michael

Я просто хочу добавить, что, когда необходимы действия, кажется хорошей практикой использовать '* ngIf' вместо' hidden': ["самый быстрый код - это код, который не запускается, а самый быстрый DOM - DOM это не существует »] (https://www.lucidchart.com/techblog/2016/05/04/angular-2-best-practices-change-detector-performance/) (Официальная ссылка Angular2 [здесь] (https : //angular.io/docs/ts/latest/guide/template-syntax.html# # видимость-и-ngif-это-не-The-же)). –

Вы можете использовать декларацию *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; 
     } 
}

источник

2016-11-25 11:13:38

Это работает. Спасибо. Но я искал решение со скрытой директивой. Я знаю, что это работает ... Просто не в этом случае. – Michael

попробуйте этот метод с функциональностью: hideDiv1() { return true; } hideDiv2() { return false; } –

'<кнопка ионной кнопки round (click) =" openLogin() "[скрыто] =" hideButton1 "> –

Могу ли я предположить, что вы экспериментируете с первой ошибкой here?

Кроме того, в Ionic2 вы также можете использовать showWhen и hideWhen (документация here), может ли соответствовать вашим потребностям?

источник

2016-11-26 20:43:56

Первое - это правильное объяснение моей проблемы. Второй, похоже, работает только для платформ и ориентации экрана. – Michael

Итак, вы считаете, что Ionic CSS (или ваш) обладает низкой специфичностью и случайно переопределяется атрибутом 'display: none;', установленным свойством 'hidden'? Для меня это имело бы смысл. –

Извините за второе, я неправильно понял подпись 'showWhen' и' hideWhen'. Я думал, что «платформы» были просто логическими, предусмотренными этапом построения. –

Как я могу скрыть скрытую директиву в html-шаблоне?

ответ

Смежные вопросы