Question

我使用*ngFor添加了组件的多个实例，因为我需要所有实例在QueryList中都可用。然后，我使用[hidden]来尝试根据返回布尔值的表达式隐藏某些组件。这不起作用，但是使用[class.hide]可以。 [class.hide]与[hidden]有什么不同？我们担心我们可能需要在使用[hidden]的应用程序中的其他地方修改代码。

Answer 1

使用[hidden]时，只需设置HTML attribute 'hidden'

用户代理应该隐藏具有此属性的元素，但要注意的是，如果元素具有明确指定的另一种显示样式，它将获得优先权。

注意：更改元素上CSS显示属性的值使用hidden属性将覆盖行为。例如，元素样式的显示：尽管隐藏，flex仍将显示属性的存在。

在下面的示例中，即使添加div属性，也不会隐藏hidden。

div {
  display: block
}

<p hidden> Paragraph - Hide Me</p>
<div hidden> Div - Hide Me</div>

我们担心我们可能需要修改应用中其他地方的代码，使用[隐藏]

如果要使用hidden属性而不是类，则可以在CSS中为hidden属性添加样式：

[hidden] {
  display: none !important;
}

div.show {
  display: block
}

<div class="show" hidden> Div - Hide Me</div>

想法是采用一种策略，而不要混用[hidden]和[class.hide]

[class.hide]只需将类hide添加/删除到元素中，并且应该在CSS中为hide添加样式规则。这里没有上述警告。

.hide {
  display: none;
}

<p class="hide">Hide Me</p>

Answer 2

[class.hide]与[hidden]有什么不同？

绑定到[hidden]将有条件地将属性hidden添加到html元素。

HTML hidden Attribute

如果存在，则表示元素尚未或不再相关。

浏览器不应显示具有指定的hidden属性的元素。

绑定到[class.hide]将有条件地将名为hide的类添加到html元素。然后，您还需要为类hide定义样式（在引用的.css文件或component attribute中）。因为它是一种样式，所以您可以使.hide随心所欲。一个例子是这样：

.hide {
  display: none !important;
}

您应该使用的内容取决于上下文和最终目标。我没有看到将[hidden]直接应用于组件的问题。如果确实有这样的问题，建议您编辑问题，并添加足够的代码以创建可验证的示例。

Answer 3

使用[hidden]角将编译模板并将HTML元素的属性设置为hidden。浏览器不会显示具有as属性的任何元素。

我还创建了一个示例代码段，该代码段使用[hidden]属性，并且运行良好。 https://embed.plnkr.co/plunk/a3gdJp

Angular 7中的[hidden]和[class.hide]有什么区别？

3 个答案:

HTML hidden Attribute