以角度使用来自其他组件的警报消息

Posted 2023-02-23

【中文标题】以角度使用来自其他组件的警报消息

【英文标题】：Using alert message from other component in angular

【发布时间】：2018-09-14 23:41:09

【问题描述】：

我搜索了几个关于在 Angular 4/5 中使用其他组件的函数/变量的示例。他们帮助了我一些理解，但我仍然无法弄清楚我的问题的解决方案。

我想从另一个组件调用标准 javascript alert。

我有一个组件，它有一个像这样的变量：

center.ts

export class CenterPage 
  public message = new alert("Warning");

center.html

<products [message]="message"></products>

我正在使用@Input 获取 products.ts

中的消息

export class ProductsComponent 
  @Input() message;

现在我想在用户点击 product.html

中的按钮时显示警报

<button (click)="message"></button>

这似乎是错误的，我认为这不是我尝试在用户单击按钮时显示警报的正确方式。

我怎样才能正确地做到这一点？

编辑

这只是一个例子。最后，我将不得不在几个组件中调用相同的警报。所以我尝试只使用一个可以从所有组件调用的函数，这样我就不会有多余的代码。

【问题讨论】：

alert 是什么？那是您创建的课程吗？或者你想调用一个标准的 JavaScript alert() 函数？

好问题，完全错过了它可能是自定义类的事实。但据我所知，您不应该使用 alert 作为类名，因为它是一个内置函数。

哦，对不起，我忘了，我会编辑我的帖子。这是普通的 JavaScript 标准

【参考方案1】：

您应该将字符串放入组件而不是整个警报本身。之后，您可以在单击处理程序中调用警报。

只将字符串传递给您的子组件。

export class CenterPage 
  public message = "Warning";

在专用函数中处理点击。

<button (click)="myFunc"></button>

在你的函数中做你的逻辑工作。

public myFunc() 
  alert(this.message);

【讨论】：

谢谢，这是个好主意，但问题是，我需要从多个组件调用此警报，然后我必须在每个组件中添加“myFunc()”。我试图避免冗余代码

改用服务。您只需要将服务注入所有组件。

是的，当我用谷歌搜索时，我也找到了这个解决方案，但对我来说只是使用警报似乎有点“夸张”..没有更简单的方法吗？

您也可以坚持您的解决方案，只要您将整个函数（如 myFunc()）传递给 @Input() 消息。然而，这并不是最好的方法。最佳做法是改用服务。

【参考方案2】：

您必须使用服务才能获得这样的功能。您必须创建一个“服务”文件夹，您将在其中创建一个 alert.service.ts 文件。在此文件中，您将定义要在所有组件中显示的警报功能。

然后您将在需要它的组件中导入此服务。

我建议你从 Angular 文档中阅读这篇教程，这真的很方便：https://angular.io/tutorial/toh-pt4