1. 创建一个服务来自定义警告框文本，例如：

import { Injectable } from '@angular/core';

@Injectable() export class AlertService { message: string;

constructor() {}

setMessage(msg: string) { this.message = msg; }

getMessage() { return this.message; } }

2. 在组件中，注入该服务并在load或unload事件上注册窗口beforeunload事件，例如：

import { Component, OnInit, HostListener } from '@angular/core'; import { AlertService } from './alert.service';

@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent implements OnInit { title = 'custom-beforeunload-alert'; message: string;

constructor(private alertService: AlertService) {}

ngOnInit() { this.alertService.setMessage('确认离开吗？'); }

@HostListener('window:beforeunload', ['$event']) unloadNotification($event: any) { const message = this.alertService.getMessage(); if (message) { $event.returnValue = message; } } }

3. 在模板中显示警告框文本，例如：

{{alertService.getMessage()}}