angular2中的动态路由

Question

我正在尝试使用弹性索引中的索引名称创建动态路由。 我能够通过手动添加一些名称来创建动态路由，但是当我尝试使用弹性索引名称插入路由时，它会跳过该部分，

app.routing.ts

constructor(http: Http, router: Router) {
        http.get('http://localhost:9200/_stats').subscribe(data => {

            for (let entry of Object.keys(data.json().indices)) {
                router.config.push({path: entry, component: SearchComponent});
            }

        });
        router.config.push({path: 'test', component: SearchComponent});
        console.log('Routes: ', JSON.stringify(router.config, undefined, 1));
    }

我打印出我的路线得到的结果如下，

Routes:  [
 {
  "path": "home"
 },
 {
  "path": "404/pagenotfound"
 },
 {
  "path": "test"
 }
]

我无法找出为什么这段代码片段会跳过我插入弹性索引名称的部分。 但是当我打印出来时，它会显示我尝试添加的索引名称。

http.get('http://localhost:9200/_stats').subscribe(data => {

            for (let entry of Object.keys(data.json().indices)) {
                router.config.push({path: entry, component: SearchComponent});
            }

            console.log('Routes: ', JSON.stringify(router.config, undefined, 1));
        });

我在上面打印时得到的结果。

Routes:  [
 {
  "path": "home"
 },
 {
  "path": "404/pagenotfound"
 },
 {
  "path": "test"
 },
 {
  "path": "pokemon"
 },
 {
  "path": "cars"
 },
 {
  "path": "tweets"
 },
 {
  "path": "bikes"
 },
 {
  "path": "apple"
 }
]

当我尝试访问该URL时，它会抛出如下错误。

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'tweets'

你能告诉我我做错了什么吗？

编辑

import {APP_INITIALIZER, NgModule, OnInit} from '@angular/core';
import {CommonModule,} from '@angular/common';
import {BrowserModule} from '@angular/platform-browser';
import {Routes, RouterModule, Router, Resolve} from '@angular/router';
import {SearchComponent} from './search/search.component';
import {NotFoundComponent} from "./notfoundcomponent/notfoundcomponent.component";
import {HomeComponent} from "./home/home.component";
import {Http} from "@angular/http";
import {init} from "protractor/built/launcher";


export function loadRoutes(http: Http, router: Router) {
    return () => {
        router.resetConfig([
            {path: 'fd', component: HomeComponent}
        ]);
    };
}

let routes: Routes = [
    {path: '', redirectTo: 'home', pathMatch: 'full'},
    {path: 'home', component: HomeComponent},
    {path: '404/pagenotfound', component: NotFoundComponent}
];

@NgModule({
    imports: [
        CommonModule,
        BrowserModule,
        RouterModule.forRoot(routes)
    ],
    providers: [{
        'provide': APP_INITIALIZER,
        'useFactory': init,
        'deps': [Http, Router],
        'multi': true
    }],
    entryComponents: [SearchComponent]
})

export class AppRoutingModule {

    constructor(private http: Http, private router: Router) {

        http.get('http://localhost:9200/_stats').subscribe(data => {

            for (let entry of Object.keys(data.json().indices)) {
                router.config.push({path: entry, component: SearchComponent});
            }
            console.log('Routes: ', JSON.stringify(router.config, undefined, 1));
        });

        console.log('Routes: ', JSON.stringify(router.config, undefined, 1));
    }

}

Answer 1

看来你需要使用resetConfig

router.resetConfig([
 { path: 'team/:id', component: TeamCmp, children: [
   { path: 'simple', component: SimpleCmp },
   { path: 'user/:name', component: UserCmp }
 ]}
]);

我认为应该有帮助的其他事情是APP_INITIALIZER

Add to providers 

 {
      'provide': APP_INITIALIZER,
      'useFactory': loadRoutes,
      'deps': [Http, Router],
      'multi': true
    },

然后添加加载器

export function loadRoutes(http: Http, router: Router) {
   return () => {
  //DO your job here 
  };

}

因此，它将等待加载路由，然后才会继续