Вы не должны изменять вещи, связанные с привязками внутри угловых хуков, потому что это мешает процессу обнаружения изменений. Рассмотрите обнаружение изменений, как будто это мясорубка. Вы должны только попытаться изменить мясо до того, как оно войдет или после того, как оно выйдет - вы не можете изменить его в середине процесса.
Что вы можете сделать, это превратить его в поток RxJs и использовать его сasync труба в шаблоне. Таким образом, Angular узнает, что что-то изменилось во время обнаружения изменений, и выполнит повторную проверку, как только это будет сделано.
Или вы можете ввести ChangeDetectorRef и сделать this.changeDetectorRef.markForCheck() в тех местах, где вы изменили что-то, связанное с привязками в течение жизненного цикла. крючки. По сути, это то же самое, что и async pipe для вашего случая.
Это более общее предложение, вот решение для вашего конкретного случая, которое также работает с Angular Universal (рендеринг на стороне сервера):
import { DOCUMENT } from '@angular/common';
import { Component, Inject, OnInit } from '@angular/core';
@Component({
selector: 'app-index-section',
templateUrl: './index-section.component.html',
styleUrls: ['./index-section.component.scss']
})
export class IndexSectionComponent {
readonly isTrue: boolean;
constructor(@Inject(DOCUMENT) {defaultView}: Document) {
this.isTrue = !defaultView || defaultView.innerWidth < 1000;
}
}
Конечно, на сервере не будет размера окна, но доступ к свойствам на window может привести к ошибкам в этой среде, и предпочтительно не использовать DOM API в вашем приложении Angular напрямую и в любом случае использовать абстракции через токены.