Question

Angular支持主路由作为字符串属性。

即

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

但是，当有多个插座时，添加辅助路由不起作用：

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

有没有办法让这项工作？

注意：我意识到可以通过以下方式实现这一目标：

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

我的问题更多的是关于使用普通字符串属性是否可行（路由器框架可以在后台解析它）。

Answer 1

目前的路由器实现似乎不可能。当您将字符串传递给routerLink时，它会被包装到一个数组中：

@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 = [];
    }
  }

here is尝试解析包装commands并从中提取出口的函数：

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 outlet并将该值用作此主要插座的路径：

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

导航到routerLink属性的辅助路由URL

1 个答案: