Как загрузить и настроить общие компоненты в Angular

Question

При нажатии Show Hello message должно загружаться HelloComponent с отображением сообщения «Hello» на главной странице.

Щелчок Show Product 1 должен загрузить ProductComponent, чтобы он отображал «Продукт 1 работает!» сообщение.

Щелчок Show Product 2 должен снова загрузить ProductComponent, но на этот раз настроить его так, чтобы он отображал «Продукт 2 работает!».

Как реализовать этот функционал? Вот ссылка на проект Stackblitz:

https://stackblitz.com/edit/angular-ivy-qkparn?file=src%2Fapp%2Fapp.component.ts

Answer 1

Демо Сначала для запуска маршрутизатора вам нужно добавить <router-outlet></router-outlet> в свой компонент.

для связи между несвязанными компонентами есть несколько способов. Они выбираются исходя из ваших потребностей.

Один из них - письменные услуги. Обычно это выбирается между компонентами. Вы можете поделиться данными с этим сервисом. Но недостатком этого является то, что при обновлении страницы sh вы больше не можете получить доступ к данным. Если вы хотите сохранить данные в сервисе, вы можете хранить данные в localStorage или sessionStorage.

Другой способ - маршрутизация. Здесь ваша проблема в том, что когда у вас есть несколько ссылок с одним и тем же компонентом и разными параметрами. Вы можете выполнить маршрутизацию, но не можете заметить, что компонент повторно инициализирован, тогда вам нужно установить onSameUrlNavigation как перезагрузку и shouldReuseRoute из routeReuseStrategy как false.

Вы можете использовать оба способа для связи между несвязанными компонентами. Для родительского дочернего компонента @Input метод - самый простой способ связи