javascript - Angular 2 - 是否可以将我的路线存储在另一个文件中并将它们导入到 app.ts 文件中(因为随着时间的推移路线会建立起来)？

Question

Angular 2 - 是否可以将我的路线存储在另一个文件中并将它们导入到 app.ts 文件中(因为随着时间的推移路线会建立起来)

这是我当前运行的 app.ts 的示例。我基本上想将路由配置路由移动到另一个文件以使其更清晰:

   import {Todo} from './components/todo/todo';
   import {About} from './components/about/about';
   import {AuthService} from './authService';

   import {Component, View, bootstrap, bind, provide} from 'angular2/angular2';
   import {Router, ROUTER_BINDINGS, RouterOutlet, RouteConfig, RouterLink, ROUTER_PROVIDERS, APP_BASE_HREF} from 'angular2/router';
   import {Location, LocationStrategy, HashLocationStrategy} from 'angular2/router';

   @Component({
       selector: 'app'
   })

   @View({
       template: `
           <div class="container">
               <nav>
                   <ul>
                       <li><a [router-link]="['/Home']">Todo</a></li>
                       <li><a [router-link]="['/About']">About</a></li>
                   </ul>
               </nav>
               <router-outlet></router-outlet>
           </div>
       `,
       directives: [RouterOutlet, RouterLink]
   })

   @RouteConfig([
       { path: '/', redirectTo: '/home' },
       { path: '/home', component: Todo, as: 'Home' },
       { path: '/about', component: About, as: 'About' }
   ])

   export class AppComponent {
       constructor(router: Router, _authService: AuthService, _location: Location){

           //Subscribe - watches routes pop state events.
           router.subscribe((val) => {      

               _authService.isUserLoggedIn().then((success) => {                 
                   router.parent.navigate(['/About']);
               });

           })       
       }
   }

   bootstrap(AppComponent, [ROUTER_PROVIDERS, provide(APP_BASE_HREF, {useValue: '/'}), AuthService]);

Answer 1

我个人创建了一个 route.interface.ts 和一个 route.ts 文件。

Routes file

import {Route} from './route.interface'
import {AuthComponent} from './auth/auth.component'

export const Routes: Route[] = [
    {
        path: '/auth',
        name: 'Authenticate',
        component: AuthComponent
    },
];

Route Interface

export interface Route {
    path: string,
    name: string,
    component: any,
}

在主要组件中的使用。

import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from 'angular2/router'
import {Routes} from './routes'

@Component({
    selector: 'app',
    templateUrl: './angular2/app/layout.component.html',
    directives: [
        ROUTER_DIRECTIVES
    ],
    providers: [
        HTTP_PROVIDERS,
        ROUTER_PROVIDERS
    ],
})

@RouteConfig(Routes)

希望对您有所帮助。您甚至可以创建一个路由服务并将其注入(inject)您的主要组件。享受编码吧!