Question

我想将路由配置从app文件分成不同的文件，如（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 params移动到不同的文件中，然后将其加载到主app文件中。有可能的？谢谢。（路由配置会很大，所以我想拆分它。）

第一个麻烦，就是当我尝试将配置移动到不同的文件并尝试在app文件中导入JSON时 - 我的Undefined Component出错了。因为componentsName s not a string. Can解决了这个问题。

Answer 1

您当然可以将所有路径定义移动到单独的文件中。

在像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 { }

从主应用文件

1 个答案: