隐藏在 Angular2 中不起作用

Question

我读得比[隐藏]使用*ngIf更好，但就我而言，我不想从DOM中删除元素。 在组件中.html我有

<article #articleId id="bodyArticle" [hidden]="isClicked"></article>

在 .ts 文件中

isClicked = false;

和 CSS

article {
width: 500px;
margin: 0 auto;
background-size: cover;
overflow-wrap: break-word;
justify-content: center;
height: 500px;
overflow-y: scroll;
}
[hidden]{display:none!important}

如何解决这个问题并使该文章不可见？

编辑

现在它正在工作，但现在当我尝试使用

var myArticle = document.querySelector('article');
myArticle.textContent = this.imageService.getBodyRes();

我有未定义的错误，如果文章不从 DOM 中删除，为什么会发生这种情况？

Answer 1

使用hidden属性确实没有错，但是如果您仍然想避免它，您可以简单地为元素分配一个类。

<article #articleId id="bodyArticle" [class.hidden]="isClicked"></article>

相应地更改 CSS：

article.hidden {
display: none !important;
}

Answer 2

与其尝试使用[hidden]，不如执行以下操作：

.CSS：

.hidden { 
visibility: none
}

然后在您的 HTML 中：

<article #articleId id="bodyArticle" [class.hidden]="isClicked"></article>

Answer 3

你不需要通过 css 类来做到这一点。可以使用[hidden]属性显示或隐藏元素。

你犯的错误是，当条件为真时，[hidden]会产生影响。在您的情况下，您只需要反转您的isClicked变量。

<article #articleId id="bodyArticle" [hidden]="!isClicked"></article>

另外，从 css 中删除以下内容：

[hidden]{display:none!important}