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

使用Archive_Loc属性确实没有任何问题，但如果您仍想避免使用它，则可以简单地为该元素指定一个类。

hidden

相应地更改CSS：

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

Answer 2

您可以执行以下操作，而不是尝试使用except:：

CSS：

[hidden]

然后在你的HTML中：

.hidden { 
  visibility: none
}

Answer 3

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

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

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

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

[hidden]{display:none!important}

隐藏在Angular2中的人不能工作

3 个答案: