2015-10-06 5 views
6

में मैं नए कोणीय रूटर के लिए प्रलेखन से अधिक पढ़ा है। उदाहरण वे एक चर करने के लिए रूट करने के लिए है यह है:रूटिंग चर Angular2

घटक/मॉड्यूल:

angular.module('myApp', ['ngFuturisticRouter']) 
.controller('AppController', ['$router', function($router) { 
    $router.config({ path: '/user/:id' component: 'user' }); 
    this.user = { name: 'Brian', id: 123 }; 
}); 

HTML/टेम्पलेट:

@RouteConfig([ 
    { path: '/', component: Home, as: 'home' }, 
    { path: '/displays/:id', component: DisplayDetails, as: 'display-details' } 
]) 

:

<div ng-controller="AppController as app"> 
    <a router-link="user({id: app.user.id})">{{app.user.name}}</a> 
</div> 

यहाँ मेरी घटक है और मेरा एचटीएमएल/टेम्पलेट:

<div class="col-md-3" *ng-for="#display of displays"> 
    <a [router-link]="['/display-details({id: display.id})']"><display-card ></display-card></a> 
</div> 

मैं भी बजाय घटक उर्फ ​​(display-details) मैं वास्तविक पथ और घटक यह स्वयं लेकिन वे सभी मुझे एक ही त्रुटि दिखा सकते हैं डाल की कोशिश की है डालने की कोशिश की है: @ द्वारा के रूप में सुझाव दिया

EXCEPTION: Component "App" has no route named "display-details({id: display.id})". in [null] 
+1

" [{display.id id}, '/ प्रदर्शन-विवरण'] "' [रूटर लिंक] = के साथ प्रयास करें? –

+0

@EricMartinez धन्यवाद आदमी! मैं अल्फा.37 का उपयोग कर रहा हूँ। BTW आप वास्तव में मुझे Angular2 के साथ बाहर मदद की है मुझे लगता है कि आप सभी सवालों मैं – ThreeAccents

+0

लिया है @EricMartinez आप इसे एक जवाब बनाने चाहते उत्तर दिया है तो मैं एक जाँच चिह्न – ThreeAccents

उत्तर

7

ThreeAccents

प्रलेखन RouterLink से हवाला देते हुए।

RouterLink expects the value to be an array of route names, followed by the params for that level of routing. For instance ['/Team', {teamId: 1}, 'User', {userId: 2}] means that we want to generate a link for the Team route with params {teamId: 1} , and with a child route User with params {userId: 2} .

तो समाधान अपने routerLink इस प्रकार के लिए बदलने के लिए है:

<div class="col-md-3" *ng-for="#display of displays"> 
    <a [routerLink]="['/display-details', {id: display.id}]"> 
     <display-card ></display-card> 
    </a> 
</div> 

खुशी है कि यह आप के लिए काम किया :)

+1

दे सकते हैं मैं के रूप में एपीआई प्रतिबिंबित करने के लिए अपने जवाब अद्यतन 2.0 बीटा। मुझे लगता है कि यह अभी भी 2 चीजें गायब है। लिंक '/ डिस्प्ले-विवरण 'होना चाहिए/डिस्प्ले डिस्प्ले' और 'पैरामीटर' के रूप में मार्ग को 'नाम' में बदल दिया गया है। –

5

वाक्य रचना मेरे मामले में काम करता है यही कारण है कि:

<div class="col-md-3" *ng-for="#display of displays"> 
    <a [routerLink]="['/display-details', display.id]"> 
     <display-card ></display-card> 
    </a> 
</div> 

: इस रूटर config साथ

`, Btw, किस संस्करण का उपयोग कर रहे हैं:

@RouteConfig([ 
    { path: '/', component: Home, as: 'home' }, 
    { path: '/display-details/:id', component: DisplayDetails } 
])