激活一次的路由器命名出口

Question

是否有可能让路由器命名的 outlets 被激活一次，然后永远不会被销毁，无论在主 outlet 中导航什么路由？

目的是让组件在页面上持续存在（例如，侧边栏），但在初始加载时获得路由的好处 - 例如守卫（解析器）和延迟加载。

要求是命名的 outlet 不应该以任何负面的方式影响 UX，例如通过在 SPA URL 中引入垃圾后缀，例如(outletName:routeName)，它们也不应该被意外停用。如果有办法在初始激活后将它们与路由器分离，那将是合适的。

skipLocationChange 选项不能用于此目的。在this example/login(popup:compose) 中，当Contact 和Login 路由顺序导航时，URL 会出现。

Answer 1

路由器需要有关命名插座的信息，因此实施您自己的UrlSerializer 很有可能会有所帮助。

想法很简单，反序列化过程应该知道具有静态命名出口的路由并生成包含命名出口的UrlTree，即/login url 应该生成相同的UrlTree，因为默认序列化程序将为url @987654325 生成@。在序列化过程中，静态命名的出口参数不应包含在结果 url 中。

Answer 2

如果没有将辅助路由附加到 URL，我们似乎无法使用以命名出口为目标的辅助路由。正如您的问题中所建议的那样，一种可能的解决方案是在组件被激活后将其从路由器插座中分离出来。 this stackblitz 中显示了我实施该解决方案的尝试：

<router-outlet name="popup" #popupRouterOutlet (activate)="processActivate($event)"></router-outlet>
<ng-container #popupContainer></ng-container>

export class AppComponent {

  @ViewChild("popupRouterOutlet", { read: ViewContainerRef }) private popupRouterOutlet: ViewContainerRef;
  @ViewChild("popupContainer", { read: ViewContainerRef }) private popupContainer: ViewContainerRef;

  constructor(public router: Router) {
  }

  processActivate(e) {
      let viewRef = this.popupRouterOutlet.detach(0);
      this.popupContainer.insert(viewRef);
      this.router.navigate([".", { outlets: { popup: null } }]);
  }
}

在activate 事件处理程序中，组件从路由器出口分离，它被插入ng-container，并清除路由器出口。然后组件可以留在 DOM 中，不再使用辅助路由。

组件的静态内容已成功传输，但不幸的是，绑定没有成功。这个问题已经被报告了。 Angular Github 上的issue 20824 提出了一个请求，允许将组件从一个容器移动到另一个容器。在实现该功能请求之前，这种传输似乎是不可能的。

Answer 3

我们在项目中遇到了相同（关键）的用户体验需求，并提出了一个半干净但功能齐全的解决方案。

实现一个自定义LocationStrategy，我们只需扩展默认的PathLocationStrategy 类并预处理URL（将呈现给用户/浏览器）：

@Injectable()
export class OnlyPrimaryLocationStrategy extends PathLocationStrategy implements LocationStrategy {
  static readonly AUX_ROUTE_SEPERATOR = '//';

  replaceState(state: any, title: string, url: string, queryParams: string): void {
    super.replaceState(state, title, this.preprocessUrl(url), queryParams);
  }

  pushState(state: any, title: string, url: string, queryParams: string): void {
    super.pushState(state, title, this.preprocessUrl(url), queryParams);
  }

  preprocessUrl(url: string): string {
    if (url.includes(OnlyPrimaryLocationStrategy.AUX_ROUTE_SEPERATOR)) {
      if (url.split(OnlyPrimaryLocationStrategy.AUX_ROUTE_SEPERATOR).length > 2) {
        throw new Error(
          'Usage for more than one auxiliary route on the same level detected - please recheck imlementation'
        );
      }
      return url.split(OnlyPrimaryLocationStrategy.AUX_ROUTE_SEPERATOR)[0].replace('(', '');
    } else {
      return url;
    }
  }
}

不要忘记在你的模块中提供它：

providers: [
    {
     // ...
      provide: LocationStrategy,
      useClass: OnlyPrimaryLocationStrategy,
    },
  ],

字符串处理显然不是 100% 干净的，但它可以为我们完成工作 - 也许它可以帮助您。请注意，您的 URL 现在不能完全重建您的路由器状态（显然）。

Answer 4

skipLocationChange 导航选项仅适用于为其提供的路由器，然后命名的出口出现在 URL 中，如 /login(foo:bar)。

正如@kemsky 所建议的那样，可以通过覆盖UrlSerializer 来获得永久的foo 路由器出口：

import {
  UrlSerializer, DefaultUrlSerializer, UrlSegmentGroup, UrlTree
} from '@angular/router';

export class FooUrlSerializer extends DefaultUrlSerializer {
  serialize(tree) {
    const { foo, ...noFooChildren } = tree.root.children;
    const root = new UrlSegmentGroup(tree.root.segments, noFooChildren);
    const noFooTree = Object.assign(new UrlTree(), tree, { root });

    return super.serialize(noFooTree);
  }
}

...
providers: [{ provide: UrlSerializer, useClass: FooUrlSerializer }, ...]
...