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

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

i、 e

点击我！

但是，当存在多个出口时，添加辅助管线不起作用：

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

---

点击我 这似乎不可能与路由器的当前实施。
当您将字符串传递给
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 = [];
    }
  }

如您所见，如果包装的
命令
中的值不是对象（即您的情况），则它始终默认为
主
出口，并将该值用作此主出口的路径：

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

我想你也可以像这样使用路由器.navigateByUrl（“/path1/foo/path2”）routerLink

中的字符串导航到

outlets

路径，但使用数组可以完成

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

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

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