Multiple router-outlet on the page for the same route

Question

In my root component, I have the following template:

<main class="main">
  <div class="main__container">
    <div class="main__left-area">
      <router-outlet></router-outlet>
    </div>
    <div class="main__right-area">
      <router-outlet name="aside"></router-outlet>
    </div>
  </div>
</main>

I would like to load some components in the primary router-outlet and some other components in the secondary router-outlet for the same route (and of course, I have several routes). Therefore, I defined my routes like this:

export const AppRoutes: Routes = [
  {
    path: "",
    component: HomeSummaryComponent
  },  
  {
    path: "",
    component: AskSummaryComponent,
    outlet: "aside"
  },
  {
    path: "payments",
    component: PaymentComponent
  },
  {
    path: "payments",
    component: DataSummaryComponent,
    outlet: "aside"
  }
];

When the page loads, it works well, I have the HomeSummaryComponent in the primary router-outlet and the AskSummaryComponent in the aside router-outlet. However, in the navigation, I have this:

<a routerLink="/payments" class="navigation__link">Payments</a></span>

When I click on this link, the content of the primary router-outlet gets replaced by the PaymentComponent but the aside router-outlet still displays AskSummaryComponent.

I also tried to rename the second "payments" route by "/payements-aside" and replace the link with:

<a routerLink="/payments(aside:payments-aside)" class="navigation__link">Payments</a>

But it still does not work. However, when I directly access http://localhost:8083/payments(aside:payments-aside), it does work but this URL is not really clean... It can't be used for a public facing web site because.

Does anyone have an idea about how to realize this simple need?

score 4 · Answer 1 · answered Sep 10 '17 at 07:40

The following worked for me

    {
       path: 'customers', canActivate: [AuthGuard], children: [
       {
          path: '',
          component: CustomersComponent,
          outlet: 'main'
       },
       {
          path: '',
          component: SideBarComponent,
          outlet: 'sideBar'
       }
     ]
    }

score 1 · Accepted Answer · edited May 23 '17 at 11:46

For those who would be interested, I finally fixed this issue my own way. I used from the implementation of the MasterComponent described by Madhu Ranjan in here to make this plunker: http://plnkr.co/edit/NNufpBkvXD6B5S6A8HT4.

Long story short, I'm using the route configuration to create the composition of each page, then the Aggregator component uses this configuration to inject the components at the correct location. It is not very generic as such but I think it could be improved.

score 0 · Answer 3 · answered Mar 02 '17 at 19:14

0

Could you try the following syntax to navigate to PaymentComponent AND clear the aside outlet:

<a [routerLink]="[{ outlets: { primary: 'payments', aside: null }}]"> Payments</a>

answered Mar 02 '17 at 19:14

AngularChef

13,797
8
53
69

Hi, it does nothing. However, I replaced the link with `Payments` and it works but just because I'm redirected to `http://localhost:8083/payments(aside:payments-aside)`. However, as I said in the original post, I don't want the URL to contain such thing. People could change it and I don't want it. I'm exploring another idea but feel free to suggest me solution for that one. I would prefer using "native" stuff. – ssougnez Mar 02 '17 at 19:21
I'm not sure I follow (also, it looks that you have renamed a few things between your original question and now). Isn't your ultimate goal to refresh the primary outlet AND clear the aside outlet when clicking "Payments"? If yes, why would you provide a path to `aside` if you want to clear it? – AngularChef Mar 02 '17 at 19:29
Sorry if I'm being unclear. The main goal is to have a root component with two (or more) `router-outler`. Then, thanks to the routes configuration, I define the other pages of my site. For example, route "/" must show "componentA" in the "primary" outlet and "componentB" in the "aside" one. And when I navigate to "/other", I want to display "componentC" in the "primary" outlet and "componentD" in the "aside" one. I want to compose my pages via the routes. This way, when I click on a link, all `router-outlets` content is replaced. And I don't want URL such as (outlet: 'aux'). – ssougnez Mar 02 '17 at 19:35
If you don't want anything to show up in the URL, you shouldn't use the router in the first place. But this will make your life a lot more complicated. :( – AngularChef Mar 02 '17 at 19:38
Mmmmh, that's what I was afraid of. However, I'm surprised because my need is quite common and I think that other people would need that as well. All my pages will be composed of a left block and a right one where I can insert components depending on the page. I don't want to always have to create a component like "PaymentPageComponent" that contain both block and insert component, I would need such a component for every page... I'll continue on my other idea and post an answer here if it works. Thanks for your help. – ssougnez Mar 02 '17 at 19:52

Multiple router-outlet on the page for the same route

3 Answers3