Question

我已实施自定义路由器重用策略。令我惊讶的是，每次启用自定义路由器重用策略时，queryParams组件（下面定义）中的navbar都将变为未定义。如果我禁用自定义重用策略，navbar组件可以访问queryParams。

＆LT;更新＆gt;

我创建了一个玩具示例项目来显示问题，并尝试将其上传到plnkr，但不幸的是我不知道如何告诉它现场运行代码。上传的代码来自src文件夹：

https://plnkr.co/edit/Ub7Pns8EOAYn2pfXtEsY?p=preview

如果您设法运行它，那么只需打开开发人员工具并查看console.logs。在navbar中设置的项目和数据查询参数在自定义重用策略的情况下是NaN，但如果禁用重用策略则相应地设置。

＆LT; / UPDATE＆gt;

这是代码：

   import { ActivatedRoute, Routes, RouterModule, RouteReuseStrategy, DetachedRouteHandle, ActivatedRouteSnapshot } from '@angular/router';

export class CustomReuseStrategy implements RouteReuseStrategy {
    handlers: { [key: string]: DetachedRouteHandle } = {};

    queryParams(route: ActivatedRouteSnapshot): string {
        let path = route.root.firstChild.url.map((x) => {
            return x.path;
        }).reduce((x, y) => {
            return x + "/" + y;
        });
        return path + "/" + this.getProject(route) + "&" + this.getdata(route);
    }
    getProject(snap: ActivatedRouteSnapshot): string {
        if (snap.queryParams.project) {
            return "project=" + snap.queryParams.project;
        }
        return "";
    }
    getdata(snap: ActivatedRouteSnapshot): string {
        if (snap.queryParams.data) {
            return "data=" + snap.queryParams.data;
        }
        return "";
    }
    shouldDetach(route: ActivatedRouteSnapshot): boolean {
        console.log("should detach: ",this.queryParams(route).includes("project") && this.queryParams(route).includes("data"));

        return this.queryParams(route).includes("project") && this.queryParams(route).includes("data"); 
    }
    store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {
        this.handlers[this.queryParams(route)] = handle;
    }
    shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
        console.log("future: ",future, "this.queryParams(future) ",this.queryParams(future));

        return !!this.handlers[this.queryParams(future)];
    }
    retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {
        console.error("!!this.handlers[this.queryParams(route)] ", !!this.handlers[this.queryParams(route)],"this.handlers[this.queryParams(route)] ",this.handlers[this.queryParams(route)]);
        if (!!this.handlers[this.queryParams(route)]) {
            return this.handlers[this.queryParams(route)];
        }
        return null
    }
    shouldAttach(route: ActivatedRouteSnapshot): boolean {
        return !!this.handlers[this.queryParams(route)];
    }
}

想法是在网址包含project和data查询字符串参数的情况下重用快照。

在app.component.html中我有：

<app-navbar>
</app-navbar>

<router-outlet></router-outlet>

navbar.ts包含以下代码：

//ngOnInit
    this.activatedRoute.queryParamMap.subscribe((params) => {
      this.projectNumber = parseInt(params.has("project") ? params.get("project") : undefined);
      this.dataNumber = parseInt(params.has("data") ? params.get("data") : undefined);
      console.log("this.projectNumber in projects; " + this.projectNumber);
   });

我做错了什么？为什么在自定义重用策略的情况下查询参数未定义？

此外，router-outlet内部使用的组件可以像往常一样访问queryParams。

路由器重用策略无法访问查询参数

0 个答案: