Служба сообщений об ошибках, дочерние и родительские компоненты
Мне нужно, чтобы предупреждения (сообщения об ошибках) от дочерних компонентов появлялись только на родительском компоненте, но эти дочерние компоненты могут быть единственным/основным компонентом на другой странице и должны сами отображать сообщения об ошибках.
Я новичок в Angular, и у меня есть некоторые проблемы. Я искал его, но я не мог найти ответ на свои требования.
Использование Observable и Subject У меня есть служба, внедренная в компоненты для обмена сообщениями об ошибках, и компонент для их отображения. Как указано в этой ссылке: https://stackoverflow.com/a/47441188
Если я добавлю «app-error-msg» как к родительскому, так и к дочернему компонентам, сообщения будут отображаться в обоих компонентах. Я мог бы поместить его только в родительский компонент, но мне все еще нужны сообщения в дочерних/грубых компонентах на случай, если я использую их в качестве основного компонента на другой странице.
Я использую Ангуляр 7.
Перечислить/выбрать компонент
<app-error-msg></app-error-msg>
<div>
<!-- List and select components -->
</div
<app-crud-1 *ngIf = "crud-1"></app-crud-1>
<app-crud-2 *ngIf = "crud-2"></app-crud-2>
<app-crud-3 *ngIf = "crud-3"></app-crud-3>
Сырой компонент
<app-error-msg></app-error-msg>
<form>
<!-- Form Components -->
</form>
Итак, я хотел бы иметь одну службу сообщений об ошибках и отображать сообщения на основном компоненте страницы. Рассмотрение дочернего компонента на одной странице может быть родительским/основным компонентом на другой странице. Как этого добиться? Сохранение службы сообщений об ошибках или нет... Как лучше всего это сделать?
Спасибо.
Ответы 1
есть разные способы справиться с этой проблемой,
в общем, вы можете использовать классическую связь между ребенком и родителем, отправив событие родителю, используя @Output() err = new EventEmitter().
ваш родительский компонент может отреагировать на это событие,
<child (err) = "errHandler($event)"></child>
вы также можете использовать Сервис, который взаимодействует между дочерними/родительскими
то, что я вижу на основе вашего кода, проблема не в том, кто отправляет сообщение об ошибке, проблема в том, как сообщение отображается в вашем представлении,
Я предлагаю немного изменить структуру вашего приложения:
- создайте компонент (MessageComponent), включенный в ваше базовое приложение, который будет прослушивать и отображать фактическое сообщение об ошибке,
- создать MessageServise, который содержит тему, которая будет получать любое сообщение,
- В MessageComponent подпишитесь на тему, прослушайте и отобразите сообщение.
- Из любого другого компонента используйте MessageService для отправки сообщений в «MessageComponent».
Ответ Рикардо правильный... Я должен сказать, что уже использовал его предложения MessageComponent/MessageService/Subject... Моя глупая ошибка в том, что у меня был компонент сообщения более чем в одном месте (<app-error- сообщение>). Итак, из его ответа я хочу подчеркнуть, что проблема заключалась в том, как сообщение отображалось на мой взгляд, и что я должен включать MessageCompoment только в базовое приложение... любой другой компонент будет использовать только MessageService для регистрации сообщений.