Angular2 Скрытые игнорирования

Я пытаюсь использовать свойство Hidden в Angular2, и когда я включаю стиль, который изменяет отображение DIV, скрытое свойство игнорируется.

При запуске кода ниже отображаются оба div. Когда я удаляю класс .displayInline, первый DIV скрыт, а второй отображается (как и ожидалось).

Можно ли использовать скрытый и отображаемый CSS вместе?

import {ComponentAnnotation as Component, ViewAnnotation as View, bootstrap, NgIf} from 'angular2/angular2';

@Component({
    selector: 'hello'
})
@View({
    template: `<style>.displayInline{ display:inline }</style><span *ng-if="name">Hello, {{name}}!</span>
    <div>
                <div [hidden]="hideDiv1()" class="displayInline">should be hidden.</div>
                <div [hidden]="hideDiv2()" class="displayInline">should be displayed.</div>
    </div>`,
    directives: [NgIf]
})
export class Hello {
    name: string = 'World';
    constructor() {
        setTimeout(() => {
          this.name = 'NEW World'
        }, 2000);
    }

    hideDiv1(){
        return true;
    }   

    hideDiv2(){
        return false;
    }
}

bootstrap(Hello);

Репозиторий: https://github.com/albi000/ng2-play

Ответ 1

Примечание: <span> по умолчанию - "display: inline", вы можете использовать их вместо этого.

В настоящее время классы переопределяют [скрытые]. Я согласен, это не так эффективно, как ng-hide/ng-show, и я надеюсь, что он исправлен в будущих версиях angular2. В настоящее время открыто в разделе Angular2 repo.

Вы можете преодолеть проблему, просто обернув свой [скрытый] элемент классом.

<span class="someClass">
  <span [hidden]="hideDiv1()">should be hidden.</span>
</span>

Ответ 2

Я столкнулся с аналогичной проблемой с классом btn bootstrap

<button [hidden]="!visible" class="btn btn-primary">Click</button>

Я решил это, добавив

[hidden] {
  display: none;
}

в конце таблицы стилей CSS, которую я использую глобально. На данный момент проблема решена.

Ответ 3

Это, вероятно, не идеально, но вы можете использовать style.display вместо hidden, если вам нужно более мелкомасштабное управление видимостью.

<div [style.display]="active?'inherit':'none'"></div>