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

Question

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

我想从其他组件中调用标准JavaScript 警告。

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

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

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

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

我建议你从角度文档中读取这个tuto，这非常方便：https://angular.io/tutorial/toh-pt4