使用 angular 中其他组件的警报消息

Question

我在 Angular 4/5 中搜索了几个关于使用来自其他组件的 functions/variables 的示例。他们帮助了我一些理解，但我仍然无法找到解决问题的方法。

我想从另一个组件调用标准 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>

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

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

编辑

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

Answer 1

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

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

export class CenterPage {
  public message = "Warning";

在专用函数中处理点击。

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

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

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

Answer 2

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

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

我建议您阅读 angular 文档中的这篇教程，它非常方便：https://angular.io/tutorial/toh-pt4

Using alert message from other component in angular