Вызов detectChanges() внутри ngAfterViewChecked

Будет ли проблема, если я позвоню ChangeDetectorRef.detectChanges() внутри ngAfterViewChecked?

https://stackblitz.com/edit/angular-ivy-weiou4?file=src/app/hello.component.ts

Компонент приложения

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular ' + VERSION.major;
  childName = 'Child';

  constructor(private cd: ChangeDetectorRef) {}

  ngAfterViewChecked() {
    this.cd.detectChanges()
  }
}

HelloComponent

export class HelloComponent {
  @Input() name: string;

  constructor(private parent: AppComponent) {}

  ngAfterViewInit() {
    this.parent.name = "Not";
  }
}

Поскольку я изменяю свойство родительского компонента из дочернего компонента в AfterViewInit, это выдает ошибку «Выражение изменилось...». Но если я добавлю detectChanges() в «AfterViewChecked» родительского компонента, ошибка исчезнет, ​​поскольку изменение всегда обнаруживается.

Есть ли проблема с этим подходом?

В дев. В любом случае обнаружение изменений вызывается дважды, так что разве я не включаю это и в рабочей среде, делая это?

Редактировать

Я знаю об альтернативах этому подходу, но мне действительно любопытны недостатки этого подхода. Например, если у него могут быть проблемы или бесконечные циклы.


angular angular-changedetection
person V.S    schedule 09.04.2021    source источник
comment
вы можете хранить свое имущество в сервисе и использовать его в обоих местах? или вы можете генерировать выходное событие из дочернего компонента со значением, которое должно быть добавлено к свойству родительского компонента   -  person Ashot Aleqsanyan    schedule 09.04.2021

Ответы (1)


arrow_upward
0
arrow_downward

Это хакерское решение, оно может сломать строку, потому что это может быть неопределенное поведение. Документы Angular предлагают использовать setTimeout или аналогичные методы...

Мне нравится предложение @AshotAleqsanyan использовать службу для обмена изменениями между родительским и дочерним компонентами. В качестве альтернативы используйте вывод (changeName) для изменения имени.

DetectChanges (ссылка)

Проверяет это представление и его дочерние элементы. Используйте в сочетании с detach для реализации локальных проверок обнаружения изменений.

person Akxe    schedule 09.04.2021