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）から名前のプロパティを推進している何をすべきか。 ご覧のとおり、spaces.nameごとにrouterLinkを追加していますが、今のところこれらのルートは@Routesデコレータ内にありません。

私の質問は次のとおりです。どのように私のルートを動的に登録できますか？ 彼らはこのようにかなっているはずです：

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

私は、ドキュメントに有用何かを見つけるcouldntのが、私は何かを見逃しているかもしれません。 アイデア

は、私はPARAMとルートを登録することができます知っている：私はAngular2にその深いないよ原因、

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

しかし、私はそれで動作する方法がわからない（またはそれ自体でさえプログラミング） 。 だから、皆さんは私に、Paramsルートを使って作業する方法を教えてもらえますか（例えばそのリンクにspacenameを取得する方法など）、関数内から新しいルートを登録する方法を教えてください。 ありがとう！

Answer 1

Plunker Demo

あなたのルートでのparamsを使用してみてくださいするには正しかったです！このようPARAMを使用するように、角度/ルータのバージョン3.0.0-beta.2、セットアップ@動的にロードされた空間データを使用して

ルータコンフィグ

：

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

データ

セットアップSpaceServiceから次のような形式でデータを返す：

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

ル

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

：ティンは、リンクは次のように動的に生成することができ、あなたのナビゲーションHTMLで

リンク