0

To explain simply, I have a modal which should open when user navigates to t/:tId/p/:pId or p/:pId to display item details. This modal should be avaliable when user clicks item on homepage or other parts of application. Also it should open when user types localhost:4200/p/:pId on browser url input. The scenario is like instagram post, or beta reddit posts. When user clicks post, it opens modal without destroying page under it.

Edit: Also I don't want to use auxulary routes.

The problem is I cannot open modal without preserving root router state.

Here's what I tried. Divided root router to two outlets. But It throws url not match error when user navigates to p/:pId.

{
   outlet: 'post-root',
   path: 'p/:id',
   component: PostComponent,
 },
 {
   path: '',
   loadChildren: () => import('./root-router/root.module').then(m => m.RootModule)
 },

<router-outlet></router-outlet>
<router-outlet name="post-root"></router-outlet>

Second Attempt: Using this route structure:

{
    outlet: 'post-root',
    path: '',
    component: PostComponent,
  },
  {
    path: '',
    loadChildren: () => import('./root-router/root.module').then(m => m.RootModule)
  },

Both RootModule and PostComponent activates but when t/:tId/p/:pId path hits, I could not manage to make RootModule ignore t/:tId/p/:pId.

Okan Aslankan
  • 3,016
  • 2
  • 21
  • 26
  • this isn't how named outlet navigation works. urls look more like... `/(post-root=p/:id)`, it's called matrix url notation and you can't get around it when using named outlets. the url needs to contain the info about which outlet to use. you're probably better off using a query parameter on your `t/:tid` route and having that component load the modal itself when it detects a change in query parameter, or just putting a shell component at that `p/:pid` route that only knows to open the modal. – bryan60 Jan 24 '20 at 22:13
  • auxulary routes are ugly and I don't want to use them. this is kind of a workaround I tried which in this case both router-outlets activates but it throws error I mentioned. thanks – Okan Aslankan Jan 24 '20 at 22:29
  • it's throwing the not match error because `/p/:id` doesn't match a named outlet. the URL i mentioned will match it – bryan60 Jan 24 '20 at 22:32
  • see answer for question: https://stackoverflow.com/questions/39726345/angular-2-named-router-outlets-without-horrible-urls I used this but modified a bit. – Okan Aslankan Jan 24 '20 at 22:36
  • When I change `path: 'p/:id',` to `path: ''` it activates both router outlets. The problem is that I want to implement it application wide so I don't have to add router-outlet for each item list. – Okan Aslankan Jan 24 '20 at 22:39

0 Answers0