错误消息服务、子组件和父组件

Question

我需要来自子组件的警报(错误消息)只出现在父组件上，但是这些子组件可能是另一个页面上唯一的/主要组件，并且需要自己显示错误消息。

我刚开始学角质，现在遇到了一些麻烦。我已经查过了，但是我找不到对我的要求的答案。

通过使用可观察和主题，我在组件中注入了一个服务来共享错误消息，并有一个组件来显示它们。就像这个链接中提到的：https://stackoverflow.com/a/47441188

如果我将'app-error-msg‘添加到父组件和子组件中，则消息将出现在两个组件上。我只能把它放在父组件中，但我仍然希望子/crud组件中的消息，以防我将它们用作另一个页面中的主要组件。

我用的是角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>

Crud元件

<app-error-msg></app-error-msg>
<form>
    <!-- Form Components -->
</form>

因此，我希望有一个错误消息服务，并使消息出现在页面的主要组件上。考虑一个页面中的子组件可以是另一个页面中的父/主组件。怎样才能做到这一点？是否保留错误信息服务..。做这件事最好的方法是什么？

谢谢。

Answer 1

管理此问题有多种方法，通常可以通过使用@Output() err = new EventEmitter()向父级发出事件来使用经典的子/父通信。父组件可以通过以下方式对此事件作出反应：

<child (err)="errHandler($event)"></child>

还可以使用在子/父级之间进行交互的服务。

根据您的代码，我看到的问题不是谁在发送错误消息，问题是消息如何在您的视图中显示，

我建议稍微改变一下你的应用程序的结构：

• 创建一个基本应用程序中包含的组件(MessageComponent)，该组件将侦听并呈现实际的错误消息，
• 创建一个包含接收任何消息的主题的MessageServise，
• 在订阅主题的MessageComponent中，侦听并呈现消息
• 使用MessageService将消息发送到"MessageComponent“