在angular 5中按下浏览器的后退按钮时，我的模式弹出窗口不会关闭

在Angular 5中，按下浏览器的后退按钮时，模态弹出窗口不会自动关闭的原因是浏览器的后退按钮会触发浏览器的历史记录变化，但不会触发Angular的路由导航事件。因此，需要手动监听浏览器的历史记录变化，并在变化时关闭模态弹出窗口。

以下是一种解决方案：

1. 在弹出窗口的组件中，使用HostListener装饰器监听浏览器的popstate事件。popstate事件会在浏览器的历史记录发生变化时触发。

import { Component, HostListener } from '@angular/core';

@Component({
  selector: 'app-modal',
  templateUrl: './modal.component.html',
  styleUrls: ['./modal.component.css']
})
export class ModalComponent {
  @HostListener('window:popstate', ['$event'])
  onPopState(event: any) {
    // 关闭模态弹出窗口的逻辑
    // 可以调用关闭模态弹出窗口的方法或发出关闭事件
  }
}

1. 在打开模态弹出窗口的地方，使用window.history.pushState方法添加一个自定义的历史记录条目。这样，当按下浏览器的后退按钮时，会触发popstate事件。

openModal() {
  // 打开模态弹出窗口的逻辑
  // 可以调用打开模态弹出窗口的方法或发出打开事件

  // 添加自定义历史记录条目
  window.history.pushState({ modalOpen: true }, '');
}

通过以上步骤，当按下浏览器的后退按钮时，popstate事件会被触发，然后可以在事件处理程序中关闭模态弹出窗口。

请注意，以上解决方案仅适用于在同一个路由下打开模态弹出窗口的情况。如果在不同的路由下打开模态弹出窗口，需要根据具体情况进行相应的处理。

推荐的腾讯云相关产品：腾讯云云服务器（CVM）和腾讯云云数据库MySQL。

• 腾讯云云服务器（CVM）：提供可扩展的云服务器实例，适用于各种应用场景。详情请参考腾讯云云服务器。
• 腾讯云云数据库MySQL：提供高性能、可扩展的云数据库服务，适用于各种规模的应用。详情请参考腾讯云云数据库MySQL。