CODEWITHSUNDEEP
angularangular2-routing
user3548538
user3548538

Reputation: 81

RouterLink with auxiliary routes

So I have got an Application with 2 seperate parts that need to be navigated individually and thought Aux Routing was the way to go.

Here are my routes:

export const ROUTES: Routes = [
  { path: '',
    component: AbmBlock
  },
  { path: 'abm',
    component: AbmBlock
  },
  { path: 'summary',
    component: SummaryBlock,
    outlet: 'detail'
  },
  { path: '**',    component: AbmBlock },
];

Here are the router outlets

    <div class="app-content">
    <div class="main-container">
        <div  class="main-panel">
            <router-outlet></router-outlet>
        </div>
    </div>
    <div class="detail-container">
        <div  class="detail-panel">
             <router-outlet name="detail"></router-outlet>
        </div>
    </div>
</div>

And this is my try to configure the RouterLink

<a [routerLink]= "['/abm']" > 1</a>
<a [routerLink]= "[{ outlets: { 'detail': ['summary']}}]" > 2</a>

EDIT:

The Second link works only when clicked first. When i navigate to "/abm" the second link stops working. When i click it while on the "/" route it works perfectly to "/(details:summary)"

When i hover the link while on the "/abm(details:summary)" route it shows "/abm/(details:summary)(details:summary)"

I guess it must be some Problem wiht relative and absolute routes, but i can't seem to find it.

Upvotes: 3

Views: 3328

Answers (2)

ZBAGI
ZBAGI

Reputation: 138

Routing entirely via script leads to bad UX. You will loose 'link' features such as 'middle click to open in new tab' or 'right click -> copy link address'. Not to mention that some users just want to hover links to see where they going.

This issue can be solved simply by manually specifying base URL and primary route inside routerLink:

<a [routerLink]= "[ '/', { outlets: { primary: 'abm', details: 'summary' } }]" >Open summary</a>

And then to remove auxiliary route without leaving current page simply set null without specifying primary outlet route:

<a [routerLink]= "[ '/', { outlets: { details: null } }]" >Close details</a>

Upvotes: 1

Terry Lam
Terry Lam

Reputation: 1085

As route abm and summary is in same level, the correct route should be /(abm//detail:summary)

When you click <a [routerLink]= "[{ outlets: { 'detail': ['summary']}}]" > 2</a> under /abm, it is looking for child component summary under /abm, while the summary component is sibling component.

To solve this problem you can route by script:

this.router.navigate([{outlets: { 'detail': ['summary']}} ], {relativeTo: this.route.parent});

Upvotes: 2

Related Questions