javascript - Angular 2-rutter löser olika komponenter

Här är mitt användningsfall:

När jag laddar URL /product/123 vill jag ladda komponenten ProductComponent

Det här är min uppsättning:

RouterModule.forRoot([            
        {
            path: 'product/:productId',
            component: ProductComponent
        },
        {
            path: '**', component: NotFoundComponent
        },
    ]),

Nu har jag lagt till en resolver för att kontrollera om det produkt-ID:t finns, så min uppsättning ser ut så här:

RouterModule.forRoot([            
        {
            path: 'product/:productId',
            component: ProductComponent,
            resolver: {
                productResolver: ProductResolver
            }
        },
        {
            path: '**', component: NotFoundComponent
        },
    ]),

Min resolver kontrollerar om det där productId-parametern finns via ett API-anrop. Problemet jag har är att när productId inte hittas vill jag ladda NotFoundComponent istället för att omdirigera till en annan sida (jag vill inte ändra URL som Angular 2-dokumentationen föreslår).

Vet någon hur man gör det? Om inget productId hittas via resolver, ladda NotFoundComponent utan att ändra URL/navigera?

Svar #1

Jag tror att allt du vill göra är att hoppa över platsändringen när du navigerar till din NotFoundComponent. Jag antar att du har injicerat Router i din resolver och gör något liknande detta när ID:t inte finns:

router.navigate(['someUrl']);

Eller så kanske du använder navigateByUrl-metoden. På båda sätten kan du tala om för routern att inte ändra URL:en:

router.navigate(['someUrl'], {skipLocationChange: true});

Svar #2

Ser inte varför du skulle behöva ladda din komponent via routerinställningar, jag skulle sätta den inuti komponenten som försöker hämta den från tjänsten, och sedan om den inte får något resultat tillbaka, växla någon boolean som styr om NotFoundComponent visas. Lite pseudo-liknande kod nedan:

ngOnInit(){
    if (this.route.snapshot.params && this.route.snapshot.params['id']){
          myService.getTheThingById((success)=>{
                this.isFound = true;
                },(err)=> {
                      this.isFound = false;
          });
}

Då, förutsatt att din NotFoundComponent har en selector i sig som 'not-found-component', sätt in den i mallen för den komponent som anropar tjänsten.

 <not-found-component *ngIf='!isFound'></not-found-component>

Relaterade artiklar