我的应用程序中有一个bootstrap-modal,并希望在打开时反映在浏览历史记录中,因此当用户单击浏览器的后退按钮时 - 模式将关闭。
我熟悉Angular的Location
对象,所以Location.back()
和Location.go()
works fine for my scenario。
问题是 - 一旦用户点击后退按钮,我想从浏览器历史记录中弹出顶部路径,因此在关闭模式后 - 用户无法使用浏览器的“下一步”按钮重新打开它。
这就是我用来实现这一目标的方法。每当用户点击名为“Post It”的标题组件按钮时,它就会显示一个模态对话框。当用户单击后退按钮时,它会将用户带到上一个路径。这是我的服务,处理对话框的打开。
`import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
import { PostItDialog } from './post-it-dialog.component';
import { Location } from '@angular/common';
import { MatDialog } from '@angular/material/dialog';`
`public openPostItDialog(dialog: MatDialog): void {
const dialogRef = dialog.open(PostItDialog, {
width: '350px'
});
const url = this.router.createUrlTree(['posts/new']).toString();
this.location.go(url);
console.log("Dialog was open");
dialogRef.afterClosed().subscribe(() => {
console.log("The dialog was closed");
this.location.go("");
})`