Angular2 - neue Routen von einem Array registrieren

Question

Ich benutze Angular2 für mein Frontend und jetzt muss ich neue Routen von einem Array registrieren.

Ich habe einen Dienst, der die Daten von einem Server erhält. In meiner AppComponent werden diese Daten in einer Variablen gespeichert.

Dies ist die Funktion meine Service-Aufruf:

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

Was ich jetzt tun, um die Namen von Eigenschaften „Räume“ in mein panelmenu (primeng) drängt. Wie Sie sehen können, füge ich einen routerLink für jeden spaces.name an, aber diese Routen befinden sich jetzt nicht mehr in meinem @Routes Decorator.

Also meine Frage ist: Wie kann ich meine Routen auf dynamische Weise registrieren? Sie sollten etw wie folgt aussehen:

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

ich etwas könnte nicht nützlich in der Dokumentation finden, aber ich könnte etwas verpasst haben. Irgendwelche Ideen?

Ich weiß, dass ich die Routen mit einem param registrieren:

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

Aber ich weiß nicht, wie er damit umgehen, weil ich nicht so tief in Angular2 (von sich selbst oder sogar Programmierung) bin . Also könnt ihr mir entweder erklären, wie man mit der Route Params arbeitet (zum Beispiel wie man den Space-Namen in diesen Link bringt oder was auch immer) oder mir sagen, wie man neue Routen innerhalb einer Funktion registriert? Danke!

Answer 1

Plunker Demo

Sie hatten Recht mit params in Ihre Routen zu versuchen!

Router Config

Mit @ Winkel/Router Version 3.0.0-beta.2, Setup, um die dynamisch geladenen Räume Daten ein param wie folgt zu verwenden:

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

Daten

-Setup SpaceService, um Daten in einem Format wie folgt aus:

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

Rou Weblinks ting

In Ihrem Navigations Html können die Links dynamisch wie folgt generiert werden:

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

Voll 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, 
]); 

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