Angular2 - 从数组中注册新路由

Question

I am using Angular2 for my frontend and now I need to register new Routes from an array.

I've got a service which gets the data from a server. Within my AppComponent this data is stored in a variable.

This is the function calling my Service:

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

What I do now is pushing the name properties from "spaces" into my panelmenu (primeng). As you can see I am appending a routerLink for each spaces.name, but by now these routes aren't within my @Routes decorator.

So my question is: How can I register my Routes in a dynamic way? They should look sth like this:

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

I couldnt find anything useful in the docs, but I might have missed something. Any ideas?

I know that I can register Routes with a param:

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

But I don't know how to work with that, cause I'm not that deep into Angular2(or even programming by itself). So could you guys either explain me how to work with the route Params (for example with how to get the spacename in to that link or whatever) or tell me how to register new routes from within a function? Thanks!

Answer 1

Plunker Demo

You were right to try using params in your routes!

Router Config

Using @angular/router version 3.0.0-beta.2, setup the dynamically loaded spaces data to use a param like this:

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

Data

Setup SpaceService to return data in a format like this:

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

Routing Links

In your navigation Html the links can be generated dynamically like this:

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

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

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