Angular 4/5中如何从其他组件调用JavaScript alert消息？

先说说你当前代码里的核心问题：

• 首先，alert是浏览器的全局函数，不能用new关键字调用，直接写alert("Warning")就可以，但你现在把它写在类的属性初始化里，会导致CenterPage组件一加载就立刻弹出弹窗，完全不是按需触发的逻辑。
• 其次，你通过@Input传给Products组件的是alert("Warning")执行后的结果——而alert函数执行后返回的是undefined，所以子组件拿到的根本不是可执行的弹窗逻辑，自然没法实现需求。

下面给你两种常用的解决方案，根据你的实际场景选择：

方案一：通过状态传递触发子组件弹窗 #

如果你的需求是由父组件（CenterPage）控制子组件（Products）何时弹出alert，可以通过传递布尔状态来实现：

CenterPage 组件代码 #

// center.ts
import { Component } from '@angular/core';

export class CenterPage {
  // 定义一个状态，控制是否触发子组件的弹窗
  public triggerAlert = false;

  // 示例：点击按钮触发状态变化
  onTriggerAlert() {
    this.triggerAlert = true;
    // 重置状态，避免重复触发（比如用户多次点击按钮）
    setTimeout(() => {
      this.triggerAlert = false;
    }, 100);
  }
}

<!-- center.html -->
<products [triggerAlert]="triggerAlert"></products>
<!-- 测试用的触发按钮 -->
<button (click)="onTriggerAlert()">触发警告弹窗</button>

Products 组件代码 #

// products.ts
import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';

@Component({
  selector: 'products',
  templateUrl: './products.component.html'
})
export class ProductsComponent implements OnChanges {
  @Input() triggerAlert: boolean = false;

  // 监听输入属性变化
  ngOnChanges(changes: SimpleChanges) {
    // 当triggerAlert从false变为true时，执行弹窗
    if (changes['triggerAlert'] && changes['triggerAlert'].currentValue) {
      alert("Warning");
    }
  }
}

方案二：用服务封装弹窗逻辑（推荐） #

如果你的需求是多个组件都可能需要调用这个弹窗逻辑，或者组件层级比较复杂，用Angular服务来封装是更灵活的方式：

第一步：创建Alert服务 #

// alert.service.ts
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root' // Angular 6+ 可以这样直接提供服务
})
export class AlertService {
  // 封装弹窗方法
  showWarningAlert() {
    alert("Warning");
  }
}

第二步：在CenterPage组件中调用服务 #

// center.ts
import { Component } from '@angular/core';
import { AlertService } from './alert.service';

export class CenterPage {
  constructor(private alertService: AlertService) {}

  // 调用服务里的弹窗方法
  showAlertFromCenter() {
    this.alertService.showWarningAlert();
  }
}

第三步：在Products组件中调用服务 #

// products.ts
import { Component } from '@angular/core';
import { AlertService } from './alert.service';

@Component({
  selector: 'products',
  templateUrl: './products.component.html'
})
export class ProductsComponent {
  constructor(private alertService: AlertService) {}

  // 在子组件里需要的地方调用弹窗
  showAlertInProducts() {
    this.alertService.showWarningAlert();
  }
}

这样不管是父组件还是子组件，只要注入这个服务，就能随时调用弹窗逻辑，而且弹窗的内容和逻辑都统一维护在服务里，后续修改起来也更方便。

内容的提问来源于stack exchange，提问作者BlueCat