首页 新闻 会员 周边 捐助

angular 19 中关闭 ng-zorro-antd 模态对话框后执行 router.navigate 出现奇怪问题

0
悬赏园豆:30 [已解决问题] 浏览: 47次 解决于 2025-01-27 11:58

园子博客后台从 angular 15 升级到 angular 19(ng-zorro-antd 也升级到了 19)后,遇到一个奇怪问题,关闭模态对话框后执行 router.navigate,Chrome 会出现如下的额 "Aw, Snap! Error code: 5" 错误:

对应的代码如下

const modalRef = await this.tagEditModalService.open(tagToEdit);
modalRef.afterClose.pipe(take(1)).subscribe(value =>
    this.router.navigate([], {
        queryParams: {
            edit: null,
            t: value === true ? Date.now() : null,
            page:
                value === true && tagId <= 0
                    ? 1
                    : this.route.snapshot.queryParams.page,
            orderBy:
                tagId <= 0
                    ? 'createTime desc'
                    : this.route.snapshot.queryParams.orderBy,
        },
        queryParamsHandling: 'merge',
        relativeTo: this.route,
    })
);

其他关闭模态对话框后执行 router.navigate 的地方也会出现这个问题

问题补充:

模态对话框的打开是通过针对 /tags?edit=-1 的路由触发的

问题与 this.router.navigate 没有关系,关闭模态对话框后,点击页面中的任何路由链接都出现这个问题

TagEditModalService 对应的实现代码

export class TagEditModalService {
    constructor(
        private readonly _nzModalService: NzModalService,
    ) { }

    async open(tag?: PostTagDto) {
        const isCreatingTag = tag == null;

        return this._nzModalService.create({
            nzTitle: isCreatingTag ? '新建标签' : '编辑标签',
            nzOkText: isCreatingTag ? '新建' : '保存',
            nzContent: TagEditModalContentComponent,
            nzData: tag,
        });
    }
}

换成 angular material 的 MatDialog 也是同样的的问题,应该是 angular cdk 的问题

export class TagsMainComponent implements OnInit {
    constructor(private readonly matDialog: MatDialog) { }

    ngOnInit() {
        const config: MatDialogConfig = {
            width: '600px',
        };

        this.matDialog.open(TagEditModalContentComponent, config);
    }
}

https://github.com/angular/components/issues/28066评论中找到一个 workaround —— 采用 NoopScrollStrategy

MatDialog 可以用这个变通方法解决

const config: MatDialogConfig = {
    width: '600px',
    scrollStrategy: new NoopScrollStrategy()
};

this.matDialog.open(TagEditModalContentComponent, config);

但 NzModalService 硬编码了 scrollStrategy,没法采用这个解决方法

private createOverlay(config: ModalOptions): OverlayRef {
  //...
  const overlayConfig = new OverlayConfig({
    scrollStrategy: this.overlay.scrollStrategies.block(),
    //...
  });

  return this.overlay.create(overlayConfig);
}
dudu的主页 dudu | 高人七级 | 园豆:27977
提问于:2025-01-24 21:14
< > 人人可用的开源BI工具
分享
最佳答案
0

是升级过程中在路由配置中添加 withViewTransitions 引起的,去掉这个配置就没这个问题了

export const appConfig: ApplicationConfig = {
    providers: [
        provideRouter(
            routes,
            withRouterConfig({
                onSameUrlNavigation: 'reload'
            }),
            withPreloading(NoPreloading),
            withViewTransitions() // 这行代码引起的
        )
    ]
}
dudu | 高人七级 |园豆:27977 | 2025-01-27 11:58
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册
Top