Как заставить Angular2 повторно создавать компоненты каждый раз, когда я показываю их

Question

В нашем приложении углового2-скрипта мы используем маршрутизатор. Наши компоненты довольно общие, и их поведение резко меняется на основе параметров, которые они получают от маршрутизатора.

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

Рассмотрите возможность создания компонента List. он получает некоторую информацию из контекста (маршрут, компонент упаковки и т. д.), такой как тип сущности, который он должен отображать.

Теперь, когда я меняю маршрут, компоненты List не повторно создаются, но его параметры обновляются. Поскольку я использую эти параметры в ngOnInit для настройки компонента, более поздние изменения не будут иметь никакого эффекта.

Я знаю, что могу использовать обнаружение изменений, чтобы обойти эту проблему, но я не хочу этого делать. Причина в том, что разработчикам будет намного проще вводить ошибки регрессии (такие как: список пользователей goto, затем сделать что-то, перейти к списку заказов, что-то там не должно быть), которые гораздо труднее обнаружить , тестировать и воспроизводить. Они гораздо более вероятны для утечки в производство.

Как я могу заставить углы повторно создать компонент списка при изменении маршрута.

Другие наблюдения: в маршрутизаторе, если я перехожу к маршруту, который не отображает компонент «Список», а затем возвращается в список, компонент повторно создается.

Answer 1

подписаться на активные параметры маршрута; это наблюдаемое

Answer 2

Вы можете вместо подписки использовать трубу async, чтобы показать последнее значение Observable.

документ: Pipes

Answer 3

Когда маршрутизатор переходит на новый маршрут, он будет сравнить существующее дерево компонентов для нового компонента дерева, уничтожая больше не нужны компоненты, создавая несуществующие необходимые компоненты, а также повторное использование экземпляров всех необходимых компонентов. Если вы используете один и тот же маршрут, а затем вручную извлекаете suffixStuff из полной строки url, угловые не будут замечать изменений в suffixStuff и не будут воссоздавать компонент. Если вы используете маршрут, который правильно объявляет свой suffixStuff, так что угловой заметит его (активный маршрут param за ответ Sameh), угловая заметит и воссоздает все еще необходимый компонент.

Несмотря на это, здесь рассмотрим случай. Например, oninit компонента List получает активные параметры маршрута и выполняет одно чтение из базы данных для настройки компонента. Мы позволяем пользователю щелкнуть мышью на этом компоненте для создания, обновления, удаления записей в базе данных. Поэтому, когда эти действия завершены, мы хотим сделать перечитание из базы данных, чтобы показать пользователю результат (это хорошая практика, чтобы отображать только данные ACID, нет?). Естественно, мы достигнем нашего кода readAndSetup, который неправильно работает в oninit-методе, и попытается выполнить какую-либо форму перезагрузки или перенаправления страницы и столкнется с проблемой, когда обратные Navs к идентичному маршруту (активные параметры и все) будут повторно использовать все существующее дерево компонентов.

Вместо этого мы должны указать код установки из oninit. Oninit получит активные параметры маршрута, сделайте и запомните сформированныйDbQuery из них, а затем вызовите его отдельно.readFromDb, который использует запомненный сформированныйDbQuery. Таким образом, перечитывание не требует повторного создания компонента (вызов oninit), мы просто вызываем this.readFromDb после завершения действия.