导航到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屋！