隐藏在Angular2中不起作用

Question

我读的比[隐藏]使用*ngIf更好,但在我的情况下,我不想从DOM中删除元素.在component.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;
}