angular - 以 Angular 使用来自其他组件的警报消息

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);
}