3

I am trying to route to a named outlet but I am unable to do so. I have modified official angular plunk ( Crisis example to demo). I have created a "detail" named outlet in crisis-center.component and modified the Admin link to rout to this new outlet <a [routerLink]="['/crisis-center/detail:admin']">Crisis Admin</a>

This is not working. It navigate to component admin but in default outlet I have also tried with navigate method but that is also having similar issue.

http://plnkr.co/edit/KXOGwX8bW0AYc86OgVdQ?p=preview

I have tried adding outlet in admin route definition as well but still same issue

 `{
        path: 'admin',
        component: CrisisAdminComponent,
        outlet: 'detail',
        canActivate: [AuthGuard]
      }`,

@angular/router : 3.0.0-alpha.7

=======EDIT:======

@angular/router : 3.0.0-alpha.8

I have update the plunker https://plnkr.co/edit/Kn4yBi5oytNVcFvUvGLR?p=preview . Now i am loading admin component in admin outlet specifed

I am getting below error in console when using navigateByUrl.

`platform-browser.umd.js:2311 EXCEPTION: Error: Uncaught (in promise): Error: Cannot match any routes: 'crisis-center/admin:admin'`
Arpit Agarwal
  • 3,993
  • 24
  • 30

1 Answers1

4

Update

There is a fix on it's way to land in RC.5

Original

routerLink doesn't yet support named <router-outlet>. With router.navigateByUrl() this can already be achieved but aux routes are not fully supported and have several known issues.

Example: 

this._router.navigateByUrl("/crisis-center(aux:chat;open=true)");

See also Angular2 router in one component

Plunker example

Community
  • 1
  • 1
Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
  • I have update a plunkr. navigateByUrl doesn't help. I have tried to create cascading outlet as required in my current project. – Arpit Agarwal Jun 27 '16 at 07:51
  • The Plunker contains ~20 files. I don't know what to look for. – Günter Zöchbauer Jun 27 '16 at 18:07
  • Sorry, I referenced wrong plunker in edit. I trimmed down plunkr to 5-6 useful files. File demoing the issues are crisis-center.componenet ( having multiple outlets) and crisis-detail.component plunk https://plnkr.co/edit/Kn4yBi5oytNVcFvUvGLR?p=preview – Arpit Agarwal Jun 27 '16 at 18:23
  • I added `()` in `crisis-detail.component.ts` and it seems to work fine. https://plnkr.co/edit/L02zD2BviQ4X6RirivY7?p=preview – Günter Zöchbauer Jun 27 '16 at 18:49
  • 1
    Thanks this worked. i have update plunk to show both (primary and admin outlet) side by side when we click show admin. I will try this in my project and hope this will work – Arpit Agarwal Jun 28 '16 at 05:39