需要将变量加载到路由器出口

Question

我想使用相同的Angular应用程序，但根据其加载方式，我希望单独加载组件。

如何在我的app-routing.module.ts中获取一个变量？

这是我到目前为止得到的：

index.html：

<fp-app component-to-show="page2"></fp-app>

app-component.ts：

componentToShow: string; 

constructor(
    private el: ElementRef,
  ) {
    const nativeEl: HTMLElement = el.nativeElement;
    this.moduleToShow = nativeEl.getAttribute('component-to-show');
  }

}

在app.component.html中：

<router-outlet componentToShow="componentToShow"></router-outlet>

在app-routing.module.ts中：

const appRoutes: Routes = [
  {
    path: '',
    component: Component1
  }
];

const appRoutes2: Routes = [
  {
    path: '',
    component: Component2
  }
];

@NgModule({
  imports: [RouterModule.forRoot(appRoutes, { useHash: false })],
  exports: [RouterModule],
  entryComponents: [FormForetagsprofil]
})
export class AppRoutingModule {
  @Input('componentToShow') componentToShow: String;

  constructor() {
    console.log(this.componentToShow);
  }