如何在Angular 12应用中从辅助路由返回

Question

我有一个Angular 12的应用，它在左边显示一个列表，在右边显示所选内容的详细信息。因为用户应该能够获得到特定事物的深度链接，所以选择是通过Angular路由器来完成的。这部分很容易完成，有很多例子可以做到这一点。

这个应用也有一个模态，例如，创建一个新的东西，对于这个模态，应用使用辅助路由，以便外部站点可以直接链接到它。

截图起初，我对生成的url感到困惑，例如，当我打开模态时，我得到

gb/en_GB/(layout/1//modal:new)

，但是选择带有开放模式的项工作得很好，这似乎是Angular路由器从URL树中构造URL的方式。

不工作的是关闭模态一旦它被打开。我正试图通过将modal出口设置为null来实现这一目标，但它不起作用:

@Component({
selector: 'app-modal',
templateUrl: './modal.component.html',
styleUrls: ['./modal.component.css']
})
export class ModalComponent {
showCloseButton = false;
constructor(private router: Router, private route: ActivatedRoute) {}
activate(active: boolean) {
this.showCloseButton = active;
}
close() {
this.router.navigate([{ outlets: { modal: null } }], {
replaceUrl: true
});
}
}

我也有一个完整的例子Stackblitz。

1. 如何关闭模态?
2. 有可能进行"清洁"吗?后面的URL(不带括号)，即gb/en_GB/layout/1

Answer 1

经过一些尝试和错误之后，我发现我必须使用relativeTo为导航指定一个锚。在本例中是

close() {
this.router.navigate([{ outlets: { modal: null } }], {
replaceUrl: true,
relativeTo: this.route.parent
});
}

，它将相对于当前路由的父路由(具有RootComponent的路由)应用modal: null增量。