最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Angular 2 - Is it possible to store my routes in another file and import them into the app.ts file (because over ti

programmeradmin3浏览0评论

Angular 2 - Is it possible to store my routes in another file and import them into the app.ts file (because over time the routes will build up)

Here is an example of my current app.ts that works. I basically want to move the route config routes to another file to make it cleaner:

   import {Todo} from './ponents/todo/todo';
   import {About} from './ponents/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', ponent: Todo, as: 'Home' },
       { path: '/about', ponent: 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]);

Angular 2 - Is it possible to store my routes in another file and import them into the app.ts file (because over time the routes will build up)

Here is an example of my current app.ts that works. I basically want to move the route config routes to another file to make it cleaner:

   import {Todo} from './ponents/todo/todo';
   import {About} from './ponents/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', ponent: Todo, as: 'Home' },
       { path: '/about', ponent: 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]);
Share Improve this question edited Aug 13, 2018 at 4:47 user6749601 asked Nov 8, 2015 at 11:46 AngularMAngularM 16.6k29 gold badges102 silver badges175 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 10

i personally have created an route.interface.ts and a route.ts files.

Routes file

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

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

Route Interface

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

Usage in main ponent.

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

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

@RouteConfig(Routes)

Hope that helps. you can even create a route service and inject it you main ponent. Enjoy coding!

You can add your RouteConfig per ponent

Lets say you have home and about as in your example, then you would define the routing from that specific ponent in the ponent itself.

So in your about ponent you can add

 // './ponents/about/about'

 @RouteConfig([
       { path: '/about', ponent: About, as: 'About' }
 ])

And in your home ponent you can do the same

 // './ponents/home/home'

 @RouteConfig([
       { path: '/home', ponent: Todo, as: 'Home' }
 ])

与本文相关的文章

发布评论

评论列表(0)

  1. 暂无评论