Javascript Angular 8页面加载后添加类错误：ExpressionChangedTerithasBeenCheckedError

正如标题所示，我正在尝试在页面加载后向div元素添加一个类！我有一个条件isTrue，角度函数ngAfterViewInit在页面加载后执行，使isTrue值为true，然后添加类hideOnLoad。当然，我可以使用标准的javascript或jquery，但我必须用有角度的方式。本质上，最终的结果应该是，div.index-logo-wrapper在页面加载后慢慢淡出。我的想法是在加载类后添加一个类，这样可以逐渐降低您输入的不透明度

从“@angular/core”导入{Component，OnInit}； @组成部分{ 选择器：“应用程序索引部分”， templateUrl:'./index section.component.html'， 样式URL:['./索引节.component.scss'] } 导出类IndexSectionComponent实现OnInit{ isTrue:boolean=false； 公共宽度：任意； 构造函数{} 恩戈尼特{ } ngAfterViewInit{ this.innerWidth=window.innerWidth； 如果此值小于1000，则为0.1{ 这是真的； 注意这一点； } } } Lorem ipsum dolor sit amet，是一位杰出的献身者。Itaque contra est，ac dictis；两个规则：内部构造。维德斯内·夸姆·马格纳·迪森西奥？

---

可以使用三元运算符？动态添加类？。如果为isTrue，则添加hideOnLoad，否则类为空：

<div class="index-logo-wrapper" [ngClass]="isTrue ? 'hideOnLoad' : ''">

---

您可以通过以下两种方式动态添加类：

---

正如另一位所说，您可以使用以下解决方案：

<div class="index-logo-wrapper" [ngClass]="isTrue ? 'hideOnLoad' : ''">

但对于单个类，我更喜欢其他语法：

<div class="index-logo-wrapper" [class.hideOnLoad]="isTrue">

---

它更易于阅读和清理。

您不应该更改角度挂钩内绑定的相关内容，因为这会干扰更改检测过程。把变化检测看成是一个绞肉机。你只应该在肉馅进食之前或之后再把它换掉——你不能在加工过程中改变它。

您可以将其转换为RxJs流，并将其与模板中的异步管道一起使用。通过这种方式，Angular将知道在更改检测过程中发生了更改，并将在完成后再次触发它

或者，您可以在更改与生命周期挂钩中的绑定相关的内容的地方插入ChangeDetectorRef并执行此操作。ChangeDetectorRef.markForCheck。对于您的案例，它实际上与异步管道相同

这是一个更一般的建议，下面是针对您的特殊情况的解决方案，它也适用于角度通用服务器端渲染：

从'@angular/common'导入{DOCUMENT}； 从“@angular/core”导入{Component，Inject，OnInit}； @组成部分{ 选择器：“应用程序索引部分”， templateUrl:'./index section.component.html'， 样式URL:['./索引节.component.scss'] } 导出类IndexSectionComponent{ 只读isTrue：布尔值； constructor@InjectDOCUMENT{defaultView}：文档{ this.isTrue=！defaultView | | defaultView.innerWidth<1000； } }

---

当然，服务器上不会有窗口大小，但访问窗口上的属性可能会在该环境中导致错误，最好不要在Angular应用程序中直接使用DOM API，也不要通过令牌使用抽象。

第二个无效。这两种方法都适用于我。不知道你出了什么问题@AntoineBYes我更喜欢使用第二种语法，问题是它不起作用！我的代码和你的一样，问题是我做错了什么？谢谢你的输入！从概念上讲，绞肉机就是一个很好的例子！现在我必须弄清楚如何在我的例子中实现它…我想做的事情有意义吗？在你的例子中，我要做的是创建一个只读属性并在构造函数中赋值。也就是说，如果你只想设置一次。更新了我的答案。如果您想要这种动态，您可以从窗口上的调整大小事件创建一个可观察的对象，并将其与异步管道一起使用。通过这种方式，您还可以添加限制，以不影响快速调整大小事件的性能。