Question

我正在尝试做类似

的事情

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

其中chart.id类似于＆＃34; id1，id2，id3＆＃34;等等。我想在运行时生成这些，因为我不知道我会有多少ID。

我希望最终结果像

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

谢谢！

Answer 1

你现在不能这样做，但这是一个要求的功能。

您可以查看here

Answer 2

我遇到了同样的问题。我正在使用 Angular 6.0.0 。由于这似乎还不支持，我已经创建了一个带有指令的变通方法，该指令包装了原始的RouterOutlet。我知道这违反了许多角度规则，但我确实需要动态传递名称：

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

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

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

2 个答案: