CODEWITHSUNDEEP
angular
Marko Čepo
Marko Čepo

Reputation: 315

Route path in named outlet

Simply put is something like this possible ?

[routerLink]="['page1','page2',{ outlets: { myoutlet: ['page3','page4'] } }]"

How would a route config look like ? With lazy loading if possible.

Edit:

ok, so it looks like the above case isn't possible. So i have rearrange my routes to something like this ....

const mainRoutes: Routes = [
  {
    path: 'main',
    component: MainIndexComponent,
    children: [
      {
        path: 'page1',
        component: Page1Component,
        outlet: 'mynamed'
      },
      {
        path: 'page2',
        component: Page2Component,
        outlet: 'mynamed'
      },
      {
        path: 'form',
        children: [
          {
            path: 'first',
            component: FirstFormComponent,
          }
        ]
      },
      {
        path: 'home',
        component: HomeComponent,
      }
    ]
  },
];

Now i would like to view Page1Component in 'mynamed' outlet and HomeComponent. How would a routerLink look like ?

I tried :

[routerLink]="['guide','main','form', 'first', {outlets: {mynamed: ['page1']}} ]"

but no luck

Edit 2 (my solution): 

[routerLink]="['guide','main','form', 'first' ]"

This opens the page in unnamed outlet ...

[routerLink]="['guide','main',{outlets: {mynamed: ['page1']}} ]"

This opens the page in mynamed outlet without affecting the main outlet

Upvotes: 0

Views: 608

Answers (1)

Mike Bovenlander
Mike Bovenlander

Reputation: 5436

You can define a route in your app-routing.module.ts: { path: '%urlName%', component: %ComponentName%, outlet: '%routerOutletName%' }

Then in your template you can use: [routerLink]="['page1', 'page2', {outlets: {%routerOutletName%: ['%urlName%']}}]

And in your .ts file you can use to navigate to the route: this.router.navigate(['page1', 'page2', { outlets: { %routerOutletName%: ['%urlName%'] } }]);

Source, Example

Upvotes: 1

Related Questions