Angular 隐藏忽略

Posted 2023-03-13

【中文标题】Angular 隐藏忽略

【英文标题】：Angular Hidden Ignores

【发布时间】：2015-08-25 00:41:46

【问题描述】：

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

运行下面的代码时，会显示两个 div。 当我删除类 .displayInline 时，第一个 DIV 被隐藏，第二个被显示（如预期的那样）。

我可以同时使用 Hidden 和 display 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

【问题讨论】：

另见***.com/a/35578093/873282

【参考方案1】：

如果您需要对可见性进行更细粒度的控制，您可以使用style.display 而不是hidden。

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

【讨论】：

当 div 有一个需要引导的嵌套组件时，这个非常适合有效地替换 *ngIf="active"

【参考方案2】：

我在使用 btn 类的引导程序时遇到了类似的问题

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

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

[hidden] 
  display: none;

在我全局使用的 CSS 样式表的末尾。 暂时解决了这个问题。

【讨论】：

这很好，但依赖于特异性。就我而言，它不起作用，因为它被覆盖了。

你仍然可以使用display: none !important;

【参考方案3】：

注意：<span> 的默认设置为“display: inline”，您可以使用它们来代替。

当前类覆盖[隐藏]。我同意，这不如 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>

【讨论】：

引用的问题已经关闭，我怀疑它已经被一些aria-hidden 的工作卷起来了。我已要求澄清。见differences。

它可以工作，但是如果我们在 tr 的 tr 中写入 span 标签，它会破坏表格行。我该如何解决这个问题？