При загрузке одного и того же компонента с другими данными старые данные по-прежнему отображаются - Angular 5
В приложении Angular 5, которое я создаю, у меня есть боковое меню и главное меню контента.
Два элемента меню слева загружают один и тот же компонент с разными данными маршрута.
По умолчанию Angular использует один и тот же экземпляр компонента для визуализации обоих. Следовательно, ngOnInit() будет вызываться только один раз (один экземпляр).
Компонент для рендеринга содержит дочерний компонент (с обнаружением изменений, установленным на OnPush). Дочерний компонент получает данные как @Input()
При щелчке по первому пункту меню данные отображаются правильно. При щелчке по второму пункту меню старые данные все еще отображаются, и как только новые данные поступают с сервера, они отображаются.
Упомянутое поведение является нормальным. В данных в родительском компоненте пока нет изменений, и, следовательно, дочерний компонент @Input() не был изменен, поэтому ngOnChange() дочернего компонента не запускается.
Когда данные поступают с сервера, родительский компонент обновляет свои данные, и, следовательно, дочерний компонент @Input() будет обновляться соответствующим образом, и, следовательно, ngOnChange() будет запускаться на дочернем компоненте. В результате Angular будет обновляться для визуализации пользовательского интерфейса.
Цель здесь состоит в том, чтобы при переходе к тому же компоненту предварительно сбросить данные, прежде чем даже ждать поступления новых данных.
Как это выполнимо?
Спасибо