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

【问题标题】：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>

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

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

编辑

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

【问题讨论】：

【解决方案1】：

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

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

export class CenterPage {
  public message = "Warning";

在专用函数中处理点击。

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

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

public myFunc() {
  alert(this.message);
}

【讨论】：

【解决方案2】：

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

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

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

【讨论】：