时间戳

首页 > 解决方案 > RouterLink 中的 QueryParams 不起作用

angularjs - RouterLink 中的 QueryParams 不起作用

问题描述

我在queryParams内部传递动态生成的 URL [routerLink]，它破坏了路由。

IE：this.url = '/question/ask?details=1'

<a [routerLink]="url"> {{ data.name }}</a>

当我们将鼠标悬停时，它看起来像这样#/question/ask%3Fdetails%3D1，当我们单击时会中断。

PS：由于我正在传递动态 URL，因此[queryParams]无法单独传递，但这有效：

<a [routerLink]="/question/ask" [queryParams]={details: 1}> {{ data.name }}</a>

queryParams任何我们可以通过inside传递完整 URL 的解决方案[routerLink]？

标签： angularjstypescriptangular-routingrouterlink

解决方案

简短的回答：

无论您在routerLink指令内部传递什么，最终都会encodeURI在已传递的值上调用函数。

长答案

发生这种情况是因为当您直接在routerLink其中传递整个 url 时，最终会调用指令serializeUrl方法。routerLink哪个调用serialize方法urlSerializer。serialize 方法的实现如下所示。代码链接在这里

serialize(tree: UrlTree): string {
    const segment = `/${serializeSegment(tree.root, true)}`;
    const query = serializeQueryParams(tree.queryParams);
    const fragment =
        typeof tree.fragment === `string` ? `#${encodeUriFragment(tree.fragment !)}` : '';

    return `${segment}${query}${fragment}`;
}

export function encodeUriFragment(s: string): string {
    return encodeURI(s);
}

解决此问题的可能解决方法是，使用 angularRouter的称为parseUrlmethod 的内置方法对 URL 进行解码。这基本上可以帮助您找到and root,等。URLparamsqueryParams

零件

@Component({
  ...
})
export class AppComponent {
  name = 'Angular 6';
  url: any;
  formattedUrl: any;
  params: any = {};

  constructor(private router: Router) {
  }

  ngOnInit() {
    this.urlDecoder();
  }

  urlDecoder() {
    this.url = '/a?i=1 a';
    let parsedUrl = this.router.parseUrl(this.url);
    console.log(parsedUrl)
    const g: UrlSegmentGroup = parsedUrl.root.children[PRIMARY_OUTLET];
    const s: UrlSegment[] = g.segments;
    this.formattedUrl = `${s.map(p => p.path).join('/')}`; // this is required to combine all continued segment
    this.params = parsedUrl.queryParams;
  }
}

html

<a [routerLink]="formattedUrl" [queryParams]="params">
  Link Here
</a>

演示 Stackblitz

推荐阅读