javascript - Angular 4 - 没有开始斜线的routerLinks在未捕获错误后被重写

Question

这是对 Angular 4 + zonejs: routing stops working after uncaught error 的跟进因为我们很难将建议的更改整合到我们的项目中。

其原因可以在这个改编的 plunker 中看到 https://embed.plnkr.co/oUE71KJEk0f1emUuMBp8/在 app.html 中:

我们项目中的 routerLinks 没有以斜杠“/”为前缀。一旦您在访问“错误组件”后导航到另一个部分，这会破坏整个导航。所有链接都被当前路径重写，例如家。

在 routerLink 属性中添加斜杠可以修复此行为。

这是为什么？

是否有一些与此相关的文档/规范？

我们只找到了这个 angular ticket和 api for RouterLink-directive上面写着

or doesn't begin with a slash, the router will instead look in the children of the current activated route.

但这与上一个问题中建议的解决方法的未捕获错误分别有什么关系？

Answer 1

发生导航错误后恢复路由状态

this.currentRouterState = storedState;
this.currentUrlTree = storedUrl;

https://github.com/angular/angular/blob/4.1.2/packages/router/src/router.ts#L750-L751

在执行 createUrlTree 之后获得 startPosition:

function findStartingPosition(nav, tree, route) {
    if (nav.isAbsolute) { // it will be executed when you use `/` in routeLink
        return new Position(tree.root, true, 0);
    }
    if (route.snapshot._lastPathIndex === -1) { // without '/'
        return new Position(route.snapshot._urlSegment, true, 0);
    }
    ...
}

正如我们在上面的代码中看到的那样，当您在 routeLinks 中使用斜杠时，路由器将根据未更改的 tree.root 创建位置。

然后它用于创建UrlTree(下面代码中的oldSegmentGroup)

function tree(oldSegmentGroup, newSegmentGroup, urlTree, queryParams, fragment) {
    ...
    if (urlTree.root === oldSegmentGroup) { // will be false after the error
        return new UrlTree(newSegmentGroup, qp, fragment);
    }
    return new UrlTree(replaceSegment(urlTree.root, oldSegmentGroup, newSegmentGroup), qp, fragment);
}

因此解决方法可能如下:

我们不再需要 RouteReuseStrategy。

我们存储错误状态

let erroredUrlTree;
let erroredState;

export class AppModule {
  constructor(private router: Router) {
    router.events.subscribe(function (e) {
      if(e instanceof  NavigationError ) {
        erroredState = (router as any).currentRouterState;
        erroredUrlTree =  (router as any).currentUrlTree;
      }
    });
  }
}

错误发生后恢复:

@Injectable()
export class MyErrorHandler implements ErrorHandler {
  constructor(private inj: Injector) {}

  handleError(error: any): void {
    console.log('MyErrorHandler: ' + error);
    if(erroredUrlTree) {
      let router: any = this.inj.get(Router);
      router.currentRouterState = erroredState;
      router.currentUrlTree = erroredUrlTree;
      erroredState = null;
      erroredUrlTree = null;
    }
  }
}

Modified Plunker

它看起来很糟糕，但也许它有助于理解问题所在