导航到 routerLink 属性的辅助路由 URL [英] Navigation to secondary route URL for routerLink attribute

问题描述

Angular 支持将主要路由作为字符串属性.

Angular supports primary routes as string attributes.

即

<button routerlink="/path1">Click Me!</button>

但是，当有多个网点时，添加辅助路由不起作用:

However, when there are multiple outlets, adding a secondary route does not work:

<button routerlink="/path1(foo:/path2)">Click Me!</button>  <<-- does not work

有没有办法让这个工作?

Is there a way to make this work?

注意:我意识到可以通过以下方式实现:

Note: I realize its possible to achieve this with:

<a [routerLink]="['/path1', { outlets: { foo: '/path2' } }]">Click Me!</a>

我的问题更多是关于这是否可以使用纯字符串属性(路由器框架可以在幕后解析它).

My question is more about whether this is possible using plain string attributes (the router framework could parse it behind the scenes).

推荐答案

路由器的当前实现似乎不可能.当您将字符串传递给 routerLink 时，它会在此处包装到一个数组中:

It doesn't seem to be possible with the current implementation of the router. When you pass a string to a routerLink it gets wrapped into an array here:

@Directive({selector: ':not(a)[routerLink]'})
export class RouterLink {
  ...

  }

  @Input()
  set routerLink(commands: any[]|string) {
    if (commands != null) {
      this.commands = Array.isArray(commands) ? commands : [commands]; <---------------
    } else {
      this.commands = [];
    }
  }

还有这里是尝试解析包装的 commands 并从中提取出口的函数:

And here is the function that tries to parse the wrapped commands and extract outlets from it:

function getOutlets(commands: any[]): {[k: string]: any[]} {
  if (!(typeof commands[0] === 'object')) return {[PRIMARY_OUTLET]: commands};
  if (commands[0].outlets === undefined) return {[PRIMARY_OUTLET]: commands};
  return commands[0].outlets;
}

如您所见，如果包装的 commands 内的值不是对象 - 在您的情况下，它始终默认为 primary 出口并将该值用作此主要出口的路径:

As you can see, if the value inside the wrapped commands is not an object - which is your case, it always defaults to primary outlet and uses the value as a path for this primary outlet:

if (!(typeof commands[0] === 'object')) return {[PRIMARY_OUTLET]: commands};

这篇关于导航到 routerLink 属性的辅助路由 URL的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！