Angular 2 Router - named router-outlet navigation from code

11
votes

Using @angular/router": "3.4.7".

Proposed solution here doesn't work anymore.

      /**
        The ProductComponent depending on the url displays one of two info 
         components rendered in a named outlet called 'productOutlet'.
       */
        @Component({
          selector: 'product',
          template: 
          ` <router-outlet></router-outlet>
            <router-outlet name="productOutlet"></router-outlet>
          `
        })
        export class ProductComponent{
         }

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild([
          {
            path: 'product',
            component: ProductComponent,
            children: [
              {
                path: '',
                component: ProductOverviewComponent,
                outlet: 'productOutlet'},
              {
                path: 'details',
                component: ProductDetailsComponent,
                outlet: 'productOutlet' }
            ]
          }
      ]

    )],
  declarations: [
    ProductComponent,
    ProductHeaderComponent,
    ProductOverviewComponent,
    ProductDetailsComponent
  exports: [
    ProductComponent,
    ProductHeaderComponent,
    ProductOverviewComponent,
    ProductDetailsComponent
  ]
})
export class ProductModule {

}

Manual navigation works as expected

http://localhost:5000/app/build/#/product-module/product (correctly displays overview component in named outlet) 

http://localhost:5000/app/build/#/product-module/product/(productOutlet:details)

(correctly displays details component in named outlet)

THE PROBLEM

Cannot figure out the correct way to perform programatical navigation:

this.router.navigateByUrl('/(productOutlet:details)');

this.router.navigate(['', { outlets: { productOutlet: 'details' } }]);

Following errors occur:

Error: Cannot match any routes. URL Segment: 'details'.

2
angular2-routingrouter-outlet

2 Answers

18
votes

You can navigate programatically like this

this.router.navigate([{ outlets: { outletName: ['navigatingPath'] } }], { skipLocationChange: true });

Note: skipLocationChange is use to hide the url from the address bar.

Refer the official document : https://angular.io/guide/router

5
votes

You can try relative navigation as 

this.router.navigate(['new'],{relativeTo:this.route})

For this you will have to inject current router snapshot and Activated route in component as 

import { Router,ActivatedRoute } from "@angular/router";

constructor(private router:Router,private route:ActivatedRoute ){}