我正在使用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路线(例如如何将空间名称输入到该链接或其他任何方式)或者告诉我如何从函数中注册新路由? 谢谢!
答案 0 :(得分:0)
您尝试在路线中使用参数是正确的!
使用@ 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;
});
}
}