Angular2路由器 - 无法使resetConfig工作

时间:2016-10-06 11:38:53

标签: angular angular2-routing

我正在尝试在运行时向Angular2 Router添加一些配置。

我在做什么很简单。在AppModule中,我按照指南

加载路由器的初始配置

的AppModule

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    BrowserModule,
    routing,  
    ...
  ],
  providers: [appRoutingProviders],
  bootstrap: [AppComponent]
})
export class AppModule { }

appRoutes - app.routes.ts

const appRoutes: Routes = [
        { path: '', component: PocWelcomeComponent },
        { path: '**', component: PageNotFoundComponent }
    ];

    export const appRoutingProviders: any[] = [

    ];

    export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

然后在AppComponent onInit()方法中添加一些像这样的路由

AppComponent

export class AppComponent implements OnInit {

  constructor(
    private router: Router
  ) {}

  ngOnInit() {
    let routes = this.router.config;
    routes.push({ path: 'function1', component: Function1Component });
    this.router.resetConfig(routes);
  }

}

当我现在尝试使用代码this.router.navigate(['/payment']);导航到function1时,我将被路由到PageNotFoundComponent。

相反,如果我将路径配置放在AppModule的配置中,那么一切正常。

我也在使用Angular-CLI。

非常感谢任何帮助。提前致谢

1 个答案:

答案 0 :(得分:6)

试试这段代码:

let r: Route = {
    path: 'pop',
    component: PopupComponent
};

this.router.resetConfig([r, ...this.router.config]);