Question

我需要子组件的警报（错误消息）仅出现在父组件上，但是这些子组件可能是另一页上的唯一/主要组件，并且需要显示错误消息本身。

我是Angular的新手，遇到了一些麻烦。我已经查过，但是找不到我的要求的答案。

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

如果我在父组件和子组件上都添加了“ app-error-msg”，则消息将同时出现在这两个组件上。我只能将其放在父组件中，但是如果我将它们用作另一页中的主要组件，我仍然希望消息在子组件/ crud组件中。

我正在使用Angular 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>

因此，我想提供一个错误消息服务，并使消息出现在页面的主要组件上。考虑一个页面中的子组件可能是另一页面中的父/主要组件。如何实现呢？是否保留错误的味精服务...最好的方法是什么？

谢谢。

Answer 1

有多种方法可以解决此问题，通常，您可以通过使用@Output() err = new EventEmitter()向父级发送事件来使用经典的子级/父级通信。您的父组件可以通过

对此事件做出反应

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

您还可以使用在孩子/父母之间互动的服务

根据您的代码，我看到的问题不是谁在分发该错误消息，而是该消息在您的视图中的显示方式，

我建议您对应用程序的结构进行一些更改：

创建基本应用程序中包含的组件（MessageComponent），该组件将侦听并呈现实际的错误消息
创建一个包含将接收任何消息的主题的MessageServise
在MessageComponent中订阅主题，收听并呈现消息
在其他任何组件中，请使用MessageService将消息分派到“ MessageComponent”

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

1 个答案: