如何从 Angular 12 应用程序中的辅助路线返回答案

【问题标题】：How to return from auxiliary routes in an Angular 12 app如何从 Angular 12 应用程序中的辅助路线返回
【发布时间】：2021-07-29 14:59:44
【问题描述】：

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

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

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

【问题讨论】：

标签： angular angular-router angular-auxiliary-routes

【解决方案1】：

经过反复试验，我发现我必须使用relativeTo 为导航指定一个锚点。在这种情况下，它是

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

这会将增量modal: null 应用于相对于当前路由的父级（带有RootComponent 的路由）的路由。

【讨论】：