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}

我在文档中找不到任何有用的东西，但我可能错过了一些东西。 有任何想法吗？

我知道我可以用一个参数注册路由：

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

但我不知道如何使用它，因为我不是那么深入Angular2（甚至自己编程）。 所以你们能解释我如何使用Params路线（例如如何将空间名称输入到该链接或其他任何方式）或者告诉我如何从函数中注册新路由？ 谢谢！

Answer 1

Plunker Demo

您尝试在路线中使用参数是正确的！

路由器配置

使用@ angular / router version 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'}
]

路由链接

在导航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;
    });
  }
}