如何从 Angular 12 应用程序中的辅助路线 return

Question

我有一个 Angular 12 应用程序，它在左侧显示事物列表，在右侧显示所选事物的详细信息。因为用户应该能够深入link到一个特定的东西，所以选择是通过Angular路由器完成的。这部分很容易完成，有很多例子可以实现。

该应用程序还有一个模态，例如，创建一个新事物，对于这个模态，该应用程序使用辅助路由，以便外部站点可以直接 link 到它。

Screenshot

起初，我对生成的 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 完整的例子。

问题

如何关闭模式？
之后是否可以有一个“干净的”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。

如何从 Angular 12 应用程序中的辅助路线 return

How to return from auxiliary routes in an Angular 12 app

angular

angular-router

angular-auxiliary-routes