RouterLink 中的 QueryParams 不起作用

Question

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

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

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

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

P.S：由于我传递的是动态 URL，所以单独传递 [queryParams] 是不可能的，但是这可行：

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

任何我们可以在[routerLink] 内传递带有queryParams 的完整URL 的解决方案？

Answer 1

简答：

无论你在routerLink 指令中传递什么，最终都会对已传递的值调用encodeURI 函数。

---

长答案

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

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);
}

---

解决此问题的可能解决方法是，使用 Angular Router 的内置方法（称为 parseUrl 方法）解码 URL。基本上可以帮你找到root中的URL和params、queryParams等。

组件

@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>

Demo Stackblitz

Answer 2

试试这个：

this.url = ['/question', 'ask']; //Maybe without slash: ['question', 'ask']
this.query = {details: 1};

HTML：

<a [routerLink]="url" [queryParams]="query">Somewhere</a>