将Angular 2路由配置与主应用程序文件分离

Question

将Angular 2路由配置与主应用程序文件分离

8

我想将路由配置代码从应用程序文件中分离出来，放到一个独立的文件中（例如：routeConfig.ts）。这样做是否可行？

举个例子：

import {Component} from 'angular2/core';
import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
import {DashboardComponent} from './dashboard/dashboard.component';


import {MessagesComponent} from '../modules/messages/messages.component';


@Component({
    selector: 'app',
    directives: [
      ROUTER_DIRECTIVES
    ],
    templateUrl: './built/application/app.html'
})

@RouteConfig([
  {
    path: '/',
    name: 'Dashboard',
    component: DashboardComponent,
    useAsDefault: true
  }
])

export class AppComponent {}

我想将 @RouteConfig 参数移动到不同的文件中，然后在主应用程序文件中加载它。这可行吗？谢谢。(路由配置非常大，因此我想将其拆分)。

第一个问题是，当我尝试将配置移到不同的文件中，并尝试在应用程序文件中导入 JSON 时，会出现未定义组件的错误。因为 componentsName 不是字符串。无法解决此问题。

- Velidan

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Rob Louie · Accepted Answer

你肯定可以把所有的路由定义放到一个单独的文件中。

在类似于route-definitions.ts这样的文件中：

import { RouteDefinition } from 'angular2/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { InfoComponent } from './info/info.component';

export const RouteDefinitions: RouteDefinition[] = [
    {
        path: '/',
        name: 'Home',
        component: HomeComponent,
        useAsDefault: true
    },
    {
        path: '/about',
        name: 'About',
        component: AboutComponent
    },
    {
        path: '/info',
        name: 'Info',
        component: InfoComponent
    }
];

然后回到你的app.component.ts文件中，只需执行以下操作：

import { Component } from 'angular2/core';
import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from 'angular2/router';
import { RouteDefinitions } from './route-definitions';

@Component({
    selector: 'my-app',
    templateUrl: 'app/app.component.html',
    directives: [ROUTER_DIRECTIVES],
    providers: [
      ROUTER_PROVIDERS
    ]
})
@RouteConfig(RouteDefinitions)
export class AppComponent { }