如何动态/实用地生成 Angular 路由配置? [英] How do I generate Angular route configurations dynamically/pragmatically?

问题描述

我正在尝试务实地定义 Angular 2 路由路径.

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

服务如下图，(所有路径都是动态生成的)

导出类 PagesService{getPages() :string[] {返回 [{"slug": 'john',"name": 'John'},{"slug": 'martin',"name": 'Martin'},{"slug": 'alex',"name": 'Alex'},{"slug": 'susan',"name": 'Susan'}]}}

路由组件，

@Component({选择器:'应用程序'，模板:`<路由器插座></路由器插座>`，指令:[ROUTER_DIRECIVES]})@RouteConfig([{路径:'/'，名称:'Home'，组件:HomeComponent}])导出类 RouteComponent{构造函数(私有_pageService:PagesService){this.pages = this._pageService.getPages()}}

有没有像 *ngFor 这样的方法可以用来循环遍历 RouteConfig 装饰器中的 pages ?

我想获得路由配置，

类似的东西，

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

谢谢

解决方案

如@toskv 所建议

您可以使用 Router#config 来实现这一点，它可以让您动态配置路由.

在您的问题中使用服务的超级简单片段

@Component({//动态生成路由器链接模板:`<div *ngFor="#page of pages"><a [routerLink]="[page.name]">{{page.slug}}</a>

`，提供者:[PagesService]})出口类应用{页数 = [];构造函数(公共 pgSvc:PagesService，路由器:路由器){this.pages = pgSvc.getPages();//缓存页面让配置 = [];//包含动态路由的数组for(let i = 0; i < this.pages.length; i++) {配置推送({路径:this.pages[i].slug,名称:this.pages[i].name,组件:PersonComponent});}//使用动态路由配置路由器路由器配置(配置)；}}

这是一个 plnkr 示例工作

Hi I am trying to define the Angular 2 route paths pragmatically.

I have a service that returns the paths, all the paths use a common component for routing

the service is shown below, (all paths are generated dynamically)

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

The routing component,

@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()
    }
}

Is there any method like *ngFor that can be used to loop through pages inside the RouteConfig decorator?

I want to get the route configurations as,

something like,

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

thanks

解决方案

As suggested by @toskv

You can accomplish this by using Router#config which lets you to configure routes dynamically.

Super simple snippet using the service in your question

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

Here's a plnkr with the example working

这篇关于如何动态/实用地生成 Angular 路由配置?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！