角度隐藏忽略

Question

我试图在Angular2中使用Hidden属性,当我包含一个改变DIV显示的样式时,隐藏的属性将被忽略.

运行以下代码时,将显示两个div.当我删除类.displayInline时,第一个DIV被隐藏,第二个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

Answer 1

我遇到了与btn类bootstrap类似的问题

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

我通过添加来解决这个问题

[hidden] {
  display: none;
}

在css样式表的末尾我全局使用.这就解决了现在的问题.

Answer 2

注意:<span>默认为"display:inline",您可能希望使用它们.

目前,类重写[hidden].我同意,这不如ng-hide/ng-show有效,我希望它在angular2的未来版本中得到修复.它目前在Angular2回购问题上公开发布.

您只需将[hidden]元素包装在类中即可克服此问题.

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

Answer 3

如果您需要对可见性进行更细粒度的控制style.display,hidden则可以使用.

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