Angular 如何将名称绑定到路由器出口

我正试着做类似的事情

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

---

谢谢

您现在不能这样做，但这是一项要求的功能

---

你可以检查一下，我也有同样的问题。我使用的是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();
  }
}

---

在默认情况下实现此功能之前，可能有人会觉得它很有用。

试试这个

[name]='chart.id'

或

name={{{chart.id}}

我得到一个模板解析错误，因为name不是router outletok的已知属性，然后试试这个

[attr.name]='chart.id'

啊，我刚刚试过了。仍然没有：（.我在github上阅读了router outlet的源代码，名称是router outlet的私有属性。因此我认为您不能将其绑定为属性。哦，可能我对此不确定！！