如何将名称绑定到router-outlet？

Question

我正在尝试做类似于

<router-outlet name='chart.id'></router-outlet>

当 chart.id 是类似于 "id1, id2, id3" 的内容时，我希望在运行时生成这些内容，因为我不知道将有多少个 id。

最终结果应该是这样的：

<router-outlet name='id1'></router-outlet>
<router-outlet name='id2'></router-outlet>
<router-outlet name='id3'></router-outlet>

谢谢！

- Alex Tang

---

尝试使用以下代码：[name]='chart.id' 或 name={{chart.id}}。 - Pardeep Jain

我遇到了一个模板解析错误，因为“name”不是“router-outlet”的已知属性。 - Alex Tang

好的，那么尝试这个：[attr.name]='chart.id' - Pardeep Jain

啊，我刚试了一下。还是不行 :( 。我在 Github 上阅读了 router-outlet 的源代码，发现 name 是 router-outlet 的私有属性。所以我认为你不能将其绑定为属性。 - Alex Tang

哦，也许我不确定。！！ - Pardeep Jain

Answer 1

目前你无法这样做，但这是一个请求的功能。

你可以在这里进行检查。

- Michał Pietraszko

Answer 2

我遇到了同样的问题。我正在使用Angular 6.0.0。由于似乎还不支持这个功能，所以我创建了一个指令来解决这个问题，该指令包装了原始的RouterOutlet。我知道这违反了许多 Angular 的规则，但我真的需要动态传递名称：

import { ChangeDetectorRef, ComponentFactoryResolver, Directive, Input, OnDestroy, OnInit, ViewContainerRef } from '@angular/core';
import { ChildrenOutletContexts, RouterOutlet as NgRouterOutlet } from '@angular/router';

@Directive({
  selector: 'custom-router-outler',
  exportAs: 'outlet'
})
export class RouterOutlet implements OnInit, OnDestroy {
  public original: NgRouterOutlet;
  private _name: string;

  // I don't know about the side effects, if this gets changed, so 
  // this throws an error if the name gets changed twice. Yes 
  // I'm not proud of myself. This is too ugly :(
  public set name(name: string) {
    if (this._name) {
      throw new Error('The name of an outlet can\'t be changed');
    }

    this._name = name;
  }

  constructor(
    private parentContexts: ChildrenOutletContexts,
    private location: ViewContainerRef,
    private resolver: ComponentFactoryResolver,
    private changeDetector: ChangeDetectorRef
  ) {

  }

  public ngOnInit() {
    this.original = new NgRouterOutlet(this.parentContexts, this.location, this.resolver, this._name, this.changeDetector);
    this.original.ngOnInit();
  }

  public ngOnDestroy() {
    this.original.ngOnDestroy();
  }
}

也许有人会发现这对于默认实现之前很有帮助。

- Davide Perozzi