कोणीय 2: चाइल्ड रूट्स पता बार द्वारा काम नहीं कर रहे हैं

Question

हे,

मेरे पास एक कार्यरत ऐप है। जब मैं क्लिक करके बाल घटकों पर जाता हूं तो यह काम करता है लेकिन जब मैं पता बार पर पथ लिखता हूं तो यह काम नहीं करता है।

RouterModule.forRoot([    
     { 
      path:'', 
      component:SiteComponent, 
      children: [{    
      path:'portafolio/:id', 
      component:OutletComponent    
      } 
      ] 
     },  
     { 
      path:'**', 
      redirectTo: '', 
      pathMatch: 'full' 
     },  
     ]), 

जब मैं के router.navigate(['/portafolio', portafolio.id]) का उपयोग कर पहली पोर्टफोलियो यह ठीक काम करता है का कहना है कि यह बताने के लिए नेविगेट। लेकिन जब मैं पता बार लोकहोस्ट पर लिखकर पहले पोर्टफोलियो पर नेविगेट करना चाहता हूं: 4200/पोर्टफोलियो/1 यह काम नहीं करता है। यह 404 त्रुटि नहीं दिखाता है। बस '...' दिखाता है जो मेरे पास index.html में <app-root> टैग के बीच है। वाइल्डकार्ड ठीक काम करता है क्योंकि कोई अन्य गलत पता SiteComponent पर रीडायरेक्ट करता है। पता बार के पथ लिखकर मैं एक विशिष्ट पोर्टफोलियो खोलने में सक्षम होने के लिए इसे कैसे हल करूं?

अद्यतन:

RouterModule.forRoot([    
    { 
     path:'', 
     component:SiteComponent   
    }, 
    { 
     path: 'portafolio', 
     component:SiteComponent, 
     children: [{    
     path:':id',    
     component: OutletComponent 
     }]   
    },  
    { 
     path:'**', 
     redirectTo: '', 
     pathMatch: 'full' 
    },  
    ]) 

वही व्यवहार: मैं करने के लिए मार्ग config बदल दिया है। जब तक मैं किसी भी पोर्टफोलियो तक पहुंचने के लिए पता बार का उपयोग करने की कोशिश नहीं करता तब तक यह ठीक काम करता है। यह वह जगह है त्रुटि मैं:

2:19 GET http://localhost:4200/portafolio/inline.bundle.js 
2:19 GET http://localhost:4200/portafolio/polyfills.bundle.js 
2:19 GET http://localhost:4200/portafolio/styles.bundle.js 
2:19 GET http://localhost:4200/portafolio/vendor.bundle.js 
2:19 GET http://localhost:4200/portafolio/main.bundle.js 

यह बूटस्ट्रैप घटक है:

@Component({ 
    templateUrl: './outlet.component.html', 
    styleUrls: ['./outlet.component.css'] 
}) 
export class OutletComponent implements OnInit { 
portafolios:any; 
numero:string; 

constructor(private _router:Router, 
      private _activatedRoute:ActivatedRoute, 
      private _formservice : FormService) { 
    _activatedRoute.params.subscribe((parametro:Params) => this.numero = parametro['id']); 
    _formservice.data$.subscribe(data=> { this.portafolios=data }); 
} 

अद्यतन 2: मुझे लगा वहाँ गया था

import { Component } from '@angular/core'; 

@Component({ 
    selector : 'app-root', 
    template: '<router-outlet></router-outlet>' 
}) 
export class AppComponent { 

} 

यह OutletComponent परिभाषा है कुछ गलत है: आईडी इसलिए मैंने सरलीकृत किया और एक टेस्टकंपोनेंट बनाया।

'@ कोणीय/कोर' से आयात {घटक};

@Component({ 
    template: '<h1>Test</h1>', 
}) 

export class TestRoutesComponent { 

} 

और जब मैं पता बार http://localhost:4200/testroutes/ द्वारा उपयोग करने की कोशिश मैं एक ही त्रुटि मिलती है एक और मार्ग

{path: 'testroutes',component: TestRoutesComponent} 

फिर भी जोड़ा।

समाधान: ठीक है, मैं एक कोणीय-CLI परियोजना है और इस समय मार्ग http://localhost:4200/testroutes/ साथ router.navigate(['/testroutes') साथ काम कर रहा था और यह भी तो मैं 2 में उदात्त splitted और ध्यान से एक अंतर के लिए देखा है और मैं <base href="/"> एक साधारण डॉट को यह <base href="./"> अलग पाया बनाया त्रुटि पैदा कर रहा था। जब मैंने प्रोजेक्ट को क्लोन किया तो डॉट वहां था या मैंने इसे कुछ अजीब कारणों से वहां रखा था, मुझे नहीं पता। उम्मीद है कि यह किसी की मदद करता है।

Answer 1

ठीक है, मेरे द्वारा बनाए गए एक कोणीय-क्ली परियोजना और इस बार मार्ग router.navigate(['/testroutes') और ALSO http://localhost:4200/testroutes/ के साथ काम कर रहा था इसलिए मैंने 2 में उत्कृष्टता को विभाजित किया और ध्यान से एक अंतर की तलाश की और मुझे यह <base href="./"><base href="/"> से अलग मिला एक साधारण बिंदु त्रुटि उत्पन्न कर रहा था। जब मैंने प्रोजेक्ट को क्लोन किया तो डॉट वहां था या मैंने इसे कुछ अजीब कारणों से वहां रखा था, मुझे नहीं पता। उम्मीद है कि यह किसी की मदद करता है।

Answer 2

यह प्रश्न से 100% स्पष्ट नहीं है लेकिन मुझे लगता है कि सभी घटकों को एक AppModule में परिभाषित किया गया है?

मुझे लगता है कि आप अपने एक सा मार्ग को आसान बनाने में कर सकते हैं:

RouterModule.forRoot([    
{ 
    path:'', 
    component:SiteComponent   
    children: [ 
    {    
     path:'portafolio/:id',    
     component: OutletComponent 
    }] 
},  
{ 
    path:'**', 
    redirectTo: '', 
    pathMatch: 'full' 
},  
]) 

SiteComponent टेम्पलेट बच्चे मार्ग के लिए एक <router-outlet> है की आवश्यकता होगी ('portafolio /: आईडी')