Question

您好我正在尝试务实地定义Angular 2路径路径。

我有一个返回路径的服务，所有路径都使用通用组件进行路由

服务如下所示（所有路径都是动态生成的）

export class PagesService{
    getPages() :string[] {
        return  [{"slug": 'john',"name": 'John'},{"slug": 'martin',"name": 'Martin'},{"slug": 'alex',"name": 'Alex'},{"slug": 'susan',"name": 'Susan'}]
    }
}

路由组件

@Component({
    selector : 'app',
    template :  `
        <router-outlet></router-outlet>
    `,
    directives: [ROUTER_DIRECTIVES]
})
@RouteConfig([
    {path: '/', name: 'Home', component: HomeComponent}
])
export class RouteComponent{
    constructor(private _pageService: PagesService){
        this.pages = this._pageService.getPages()
    }
}

是否有*ngFor这样的方法可用于在pages装饰器内循环RouteConfig？

我想将路线配置视为

之类的，

{path: '/{{page.slug}}', name: '{{page.name}}', component: PersonComponent}

感谢

Answer 1

根据@toskv的建议

您可以使用Router#config来完成此操作，这样您就可以动态配置路由。

在您的问题中使用该服务的超级简单代码段

@Component({
    // Generate de router links dynamically as well
    template : `
        <div  *ngFor="#page of pages">
            <a [routerLink]="[page.name]">
                {{page.slug}}
            </a>
        </div>
    `,
    providers : [PagesService]
})
export class App {
    pages = [];
    constructor(public pgSvc: PagesService, router: Router) {
        this.pages = pgSvc.getPages(); // cache the pages
        let config = []; // Array to contain the dynamic routes
        for(let i = 0; i < this.pages.length; i++) {
            config.push({
                path: this.pages[i].slug, 
                name : this.pages[i].name, 
                component: PersonComponent
            });
        }
        // Configure the Router with the dynamic routes
        router.config(config);
    }
}

这是一个plnkr示例正常工作

如何动态/实用地生成角度路由配置？

1 个答案: