CODEWITHSUNDEEP
javascriptangulartypescriptangular2-routing
TroodoN-Mike
TroodoN-Mike

Reputation: 16175

Angular 2 routes resolve different component

Here is my use case:

When i load url /product/123 i want to load component ProductComponent

This is my setup:

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

Now I have added a resolver to check if that product id exists, so my setup looks like this:

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

My resolver checks if that productId parameter exists via api call. The problem i have is that when productId is not found I want to load NotFoundComponent rather than redirecting to different page (i dont want to change url like angular 2 documentation suggests).

Anyone knows how to do that? if not productId found via resolver load NotFoundComponent without changing url/navigate?

Upvotes: 4

Views: 1321

Answers (3)

Sunil D.
Sunil D.

Reputation: 18193

I think all you want to do is skip the location change when you navigate to your NotFoundComponent. I'm assuming you've injected the Router into your resolver and are doing something like this when the ID does not exist:

router.navigate(['someUrl']);

Or you might be using the navigateByUrl method. Either way, you can tell the router not to change the URL:

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

Upvotes: 3

user4676340
user4676340

Reputation:

I once faced this problem.

What I did was, in the component, to create 2 other components (in your case, you have ProductComponent, NotFoundComponent, and the other one you want to navigate to, let's say ArticleComponent)

Then I inserted 2 of the components in the main one :

product.component.html

<app-notFound></app-notFound>
<app-article></app-article>

After that, in your ngOnInit, you see if the parameter is there. If he is, then you log it in a property, let's say isParam = true.

Your template becomes

<app-notFound *ngIf="!isParam"></app-notFound>
<app-article *ngIf="isParam"></app-article>

It may not be the best solution out there, but it worked for me !

Upvotes: 0

chairmanmow
chairmanmow

Reputation: 650

Don't see why you'd need to load your component via router settings, I'd put it inside the Component that tries to fetch it from the service, and then if it doesn't get a result back toggle some boolean that controls whether the NotFoundComponent gets shown. Some pseudo-ish code below:

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

Then assuming your NotFoundComponent has a selector in it like 'not-found-component' throw it in the template for the component that's calling the service.

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

Upvotes: 3

Related Questions