Angular2 - зарегистрируйтесь новые Маршруты из массива

Question

Я использую Angular2 для моего интерфейса, и теперь мне нужно зарегистрировать новые маршруты из массива.

У меня есть служба, которая получает данные с сервера. В моем AppComponent эти данные хранятся в переменной.

Это функция вызова моей службы:

getSpaces() { 
     this.spaceService.getData() 
     .then(data => { 
      this.spaces = data; 
      for (var i = 0; i < this.spaces.length; i++) { 
       var item = { label: this.spaces[i].name, icon: 'fa-list', routerLink: ['/database' + this.spaces[i].name] } 
       this.itempanel[1].items[1].items.push(item); 
      } 
     }); 
    } 

Что я теперь толкая свойства имен из «пространства» в мой panelmenu (primeng). Как вы можете видеть, я добавляю routerLink для каждого space.name, но теперь эти маршруты не входят в мой декоратор @Routes.

Итак, мой вопрос: как я могу зарегистрировать свои маршруты динамически? Они должны выглядеть н так:

new Route {path: 'database'+this.spaces[i].name, component: SpaceComponent} 

Я не смог найти что-нибудь полезное в документации, но я мог бы что-то пропустил. Любые идеи?

Я знаю, что я могу зарегистрировать Маршруты с парами:

@Routes([ 
{path:'database/:spacename', component: SpaceComponent} 
]) 

Но я не знаю, как работать с этим, потому что я не то, что глубоко в Angular2 (или даже программирование самого по себе) , Можете ли вы, ребята, объяснить мне, как работать с маршрутом Params (например, как получить пробел в этой ссылке или что-то еще) или рассказать мне, как регистрировать новые маршруты из одной функции? Спасибо!

Answer 1

Plunker Demo

Вы были правы попытаться использовать Params в маршрутах!

Router Config

Использование @ угловой/маршрутизатор версии 3.0.0-beta.2, настройки динамически загруженные данные пространства для использования параметров, как это:

let routes: RouterConfig = [ 
    { 
    path: 'database/:spacename', 
    component: SpaceComponent 
    } 
] 

данных

Setup SpaceService возвращать данные в формате, как это:

let data = [ 
    {name: 'Space component #1', slug: 'space-1'}, 
    {name: 'Space component #2', slug: 'space-2'} 
] 

Роу тин Ссылка

В навигационном Html ссылки могут быть созданы динамически, как это:

<li *ngFor="let space of spaces"> 
    <a [routerLink]="['/database', space.slug]">{{space.name}}</a> 
</li> 

Полного app.ts

import {bootstrap} from '@angular/platform-browser-dynamic'; 
import {APP_ROUTER_PROVIDERS} from './app.routes'; 
import {ROUTER_DIRECTIVES} from '@angular/router'; 
import {Component, OnInit} from '@angular/core'; 
import {SpaceService} from './services/space.service.ts'; 

@Component({ 
    selector: 'my-app', 
    template: `<h1> angular2 router @3.0.0-beta.2 example</h1> 

    <h2 *ngIf="!spacesLoaded">Loading spaces...</h2> 

    <ul> 
    <li><a [routerLink]="['/item']">Item Component</a></li> 
    <li *ngFor="let space of spaces"> 
     <a [routerLink]="['/database', space.slug]">{{space.name}}</a> 
    </li> 
    </ul> 
    <br> 
    <router-outlet></router-outlet>`, 
    directives: [ROUTER_DIRECTIVES], 
    providers: [SpaceService] 
}) 
export class MyAppComponent implements OnInit { 
    public spacesLoaded = false; 
    public spaces = []; 
    constructor (private spaceService: SpaceService) { 
    } 
    ngOnInit() { 
    this.getSpaces(); 
    } 
    getSpaces() { 
    this.spaceService.getData().then(data => { 
     this.spaces = data; 
     this.spacesLoaded = true; 
    }); 
    } 
} 
bootstrap(MyAppComponent, [ 
    APP_ROUTER_PROVIDERS, 
]); 

Полного space.component.ts

import {Component} from '@angular/core'; 
import {ActivatedRoute, Router} from '@angular/router'; 

@Component({ 
    selector: 'space', 
    template: `This is space component <b>{{spaceslug}}</b>!` 
}) 

export class SpaceComponent { 
    public spacename; 
    constructor (
    private router: Router, 
    private activatedRoute: ActivatedRoute,) { 
    this.router.events.subscribe(path => { 
     this.spaceslug = this.activatedRoute.snapshot.url[1].path; 
    }); 
    } 
}