Показать / скрыть div в соответствии с изменением переключателя в Angular 9

Question

В моем Angular приложении есть 2 отдельных компонента. Один из компонентов - это верхняя панель навигации, на которой находится кнопка переключения. Другой компонент - это панель мониторинга и находится в отдельном модуле.

Моя панель инструментов содержит 2 блока, в которых любой из них должен быть скрыт / отображен в зависимости от изменения кнопки переключения в компоненте верхней панели навигации.

пример : Когда кнопка toggle toggle отмечена, должен отображаться div 1, а div 2 должен быть скрыт.

Может ли кто-нибудь дать мне решение с образцом stack-blitz?

Answer 1

Здесь я предполагаю, что существует привязка между двумя отдельными компонентами, которые не являются ни дочерними, ни родительскими друг для друга.

Один из способов решения этой проблемы: и снятие с охраны с помощью Subject from Rx js и сервиса. Ссылка на StackBlitz

Answer 2

1. Добавить сервис к основному модулю, который используется всеми модулями. Вы можете внедрить эту услугу в оба компонента. Затем вам нужно добавить тему в службу, на которую может подписаться панель. Навигация будет использовать службу, чтобы вызвать тему. Google 'basi c service with subject'
2. Вы можете добавить параметр запроса к URL-адресу. Затем эта панель может искать его, чтобы узнать, в каком состоянии переключения он находится. Что-то вроде:? Toggle = true. Это некрасиво, но у него есть одно преимущество. Вы можете добавить в закладки или отправить URL-адрес кому-нибудь, и он будет знать состояние переключения.

Не забудьте использовать кнопку (не ссылку привязки) для переключения

Answer 3

Angular документы содержат отличные примеры для обработки взаимодействия компонентов

Stackblitz: Link (при условии, что ваши компоненты не являются ни братьями и сестрами, ни в одном модуле)