2015-12-04 4 views
8

मैं क्या करना चाहता हूं गतिशील रूप से कोणीय 2 में कॉन्फ़िगर किए गए मार्गों की सूची के माध्यम से पुनरावृत्ति करके मेरे नेविगेशन का निर्माण करना है। मुझे राउटर में कहीं भी नहीं मिल रहा है जहां मैं कॉन्फ़िगर किए गए मार्गों तक पहुंच सकता हूं। क्या किसी ने ऐसा कुछ करने की कोशिश की है?कोणीय 2 राउटर से बाहर मार्गों की एक सूची प्राप्त करने का कोई तरीका है?

मैंने Router की registry संपत्ति में देखा लेकिन ऐसा लगता है कि इसमें कुछ भी उपयोगी नहीं है।

@Component({ 
    selector: 'my-app' 
}) 
@View({ 
    directives: [ROUTER_DIRECTIVES, CORE_DIRECTIVES], 
    template: ` 
     <h1>Routing Example</h1> 
     <div> 
      <div> 
       <b>Main menu: </b> 
       <a [router-link]="['Home']">Home</a> | 
       <a [router-link]="['One']">One</a> | 
       <a [router-link]="['Two']">Two</a> 

       <!-- 
        // I would rather do something like this: 
        <a *ng-for="#route of router.routes" [router-link]="['route.name']">{{ route.name }}</a> 
       --> 

      </div> 
      <div> 
       <router-outlet></router-outlet> 
      </div> 
     </div> 
    ` 
}) 
@RouteConfig([ 
    { path: '/', redirectTo: '/home' }, 
    { path: '/home', as: 'Home', component: Main }, 
    { path: '/one', as: 'One', component: One }, 
    { path: '/two', as: 'Two', component: Two }, 
]) 
export class MyApp { 
    constructor(public location: Location, public router: Router){ 
    } 
} 

उत्तर

4

मुझे गतिशील रूप से लिंक उत्पन्न करने की भी आवश्यकता है। जैसा कि मैं इसे समझता हूं, समस्या यह है कि राउटर में अन्य लिंक बनाने के तरीके नहीं हैं, फिर मैन्युअल रूप से उन्हें [router-link] में डाल दें। फिर भी ... but they plan to add them। राउटर के लिए कतार में lot of features है, उम्मीद है कि वे जल्द ही उन्हें जोड़ देंगे (;

अभी के लिए मैंने यह काम किया है - मैंने सजावट के बाहर राउटर कॉन्फिग लगाया है, इसलिए मैं इसे इस घटक में उपयोग कर सकता हूं (और संभवतः अन्य अगर मैं इसे निर्यात करता हूं) :

let routeConfig = [ 
    { path: '/', name: 'Intro', component: IntroRouteComponent, useAsDefault: true }, 
    ... 
    { path: '/projects', name: 'Projects', component: ProjectsRouteComponent }, 
    { path: '/about', name: 'About', component: AboutRouteComponent }, 
]; 

@Component({ 
    directives: [ROUTER_DIRECTIVES], 
    providers: [], 
    selector: 'app', 
    template: ` 
    <a (click)="back()" *ngIf="prevRoute">{{ prevRoute }}</a> 
    <a (click)="forward()" *ngIf="nextRoute">{{ nextRoute }}</a> 
    `, 
}) 
@RouteConfig(routeConfig) 
export class AppComponent { 
    private nextRoute: any; 
    private prevRoute: any; 

    constructor(private _router: Router) { 
    this._router.subscribe(route => { 
     let i = routeConfig.findIndex(r => r.path === ('/' + route)); 
     this.prevRoute = routeConfig[i - 1] ? routeConfig[i - 1].name : false; 
     this.nextRoute = routeConfig[i + 1] ? routeConfig[i + 1].name : false; 
    }); 
    } 

    back() { 
    this._router.navigate(Array(this.prevRoute)); 
    } 
    forward(): any { 
    this._router.navigate(Array(this.nextRoute)); 
    } 

} 
संबंधित मुद्दे