我正在尝试使用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);
答案 0 :(得分:32)
我遇到了与btn类bootstrap类似的问题
<button [hidden]="!visible" class="btn btn-primary">Click</button>
我通过添加
解决了这个问题[hidden] {
display: none;
}
在css样式表的末尾我全局使用。 这解决了现在的问题。
答案 1 :(得分:16)
注意:<span>
默认为“display:inline”,您可能希望改用它们。
目前,类重写[hidden]。我同意,这不如ng-hide / ng-show有效,我希望它在angular2的未来版本中得到修复。目前是an open on issue on the Angular2 repo。
您只需将[hidden]元素包装在类中即可克服此问题。
<span class="someClass">
<span [hidden]="hideDiv1()">should be hidden.</span>
</span>
答案 2 :(得分:11)
如果您需要对可见性进行更细粒度的控制,则可以使用style.display
代替hidden
。
<div [style.display]="active?'inherit':'none'"></div>