Angular 2: Trasy dla dzieci nie działają według paska adresu

Question

Hei,

Mam działającą aplikację. Kiedy przechodzę do komponentów potomnych kliknięciem działa, ale kiedy piszę ścieżkę na pasku adresu, to nie działa.

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

Kiedy przejdź do powiedzmy pierwszy portfel użyciu router.navigate(['/portafolio', portafolio.id]) to działa dobrze. Ale kiedy chcę przejść do pierwszego portfolio, pisząc na pasku adresu localhost: 4200/portafolio/1, to nie działa. Nie wyświetla błędu 404. Po prostu pokazuje "...", co mam między tagami <app-root> w pliku index.html. Symbol wieloznaczny działa dobrze, ponieważ każdy inny nieprawidłowy adres przekierowuje do SiteComponent. Jak rozwiązać ten problem, aby móc otworzyć określone portafolio również poprzez zapisanie ścieżki do paska adresu?

UPDATE: Zmieniłem config routingu do:

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

samo zachowanie. Działa dobrze, dopóki nie spróbuję użyć paska adresu, aby uzyskać dostęp do dowolnego portfela. Jest to błąd otrzymuję:

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 

To bootstrapped Składnik:

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

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

} 

Jest to definicja OutletComponent:

@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 }); 
} 

UPDATE 2: Myślałem, że może nie było coś nie tak z: id, więc uprościłem i stworzyłem TestComponent.

importuj {Komponent} z '@ kątowy/rdzeń';

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

export class TestRoutesComponent { 

} 

I dodaje inna trasa

{path: 'testroutes',component: TestRoutesComponent} 

Nadal przy próbie dostępu przez pasku adresu http://localhost:4200/testroutes/ uzyskać ten sam błąd.

ROZWIĄZANIE: Ok I stworzył kątowe-cli projekt i tym razem trasa była praca z router.navigate(['/testroutes') a także z http://localhost:4200/testroutes/ Więc podzielony wzniosły się w 2 i uważnie spojrzał na różnicę i znalazłem ten <base href="./"> innego do <base href="/"> Prosty kropka był przyczyną błędu. Kiedy sklonowałem projekt, była tam kropka, czy też umieściłem ją z jakiegoś dziwnego powodu, którego nie znam. Mam nadzieję, że to pomaga komuś.

Answer 1

Ok, ja stworzył projekt kątowy-cli i tym razem trasa pracowała z router.navigate(['/testroutes') i RÓWNIEŻ z http://localhost:4200/testroutes/ Więc podzieliłem wzniosły na 2 i starannie szukałem różnicy i znalazłem to <base href="./"> inne niż <base href="/"> Prosta kropka była przyczyną błędu. Kiedy sklonowałem projekt, była tam kropka, czy też umieściłem ją z jakiegoś dziwnego powodu, którego nie znam. Mam nadzieję, że to pomaga komuś.

Answer 2

To nie jest w 100% jasne z pytania, ale zakładam, że wszystkie komponenty są zdefiniowane w jednym AppModule?

Myślę, że można uprościć routing trochę:

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

SiteComponent szablon musiałby mieć <router-outlet> na trasie dziecięcej ('portafolio /: id')