Angular routing, create route using outlets

user_7628177 0
Viewed 52

I have my application which works without routing. But there is a place where I can open Dialog window, which also doesn't need routing.

In this dialog I have a button. If I click on this button, slide panel shoud appear, which I also can close.

I use route-outlet to open slide panel.

In Html I have something like this:

<button (click)="showAddLinkSlidePanel()"></button>
<router-outlet name="addLinkSlidePanel"></router-outlet>

Typescript:

showAddLinkSlidePanel() {
        this.router.navigate([{ outlets: { addLinkSlidePanel: 'insert-link' } }], { state: 'some data here', skipLocationChange: true });
    }

So, I just redirect to another page without changing URL

When I import RouterModule from DialogWindow Module, I have this

RouterModule.forChild([
    {
        path: 'insert-link',
        component: AddLinkSlidePanelComponent,
        outlet: 'addLinkSlidePanel',
    },
])

and in my App.module

RouterModule.forRoot([])

But. If I open dialog window, click button to show slide panel, close it using route

this.router.navigate([{ outlets: { addLinkSlidePanel: null } }], {
            skipLocationChange: false,
        });

I face with exception when after closing dialog and opening it again, slide panel is being shown.. I'm sure it's because I haven't imported RouteModule incorrectly. Maybe you can just give me advice what I do wrong. thanks.

angular2-routing angular javascript
1 Answers

I've added 

.forChild([
  {
    path: '',
    outlet: 'addLinkSlidePanel',
    component: null,
    children: [],
  },
  {
    path: 'insert-link',
    component: AddLinkSlidePanelComponent,
    outlet: 'addLinkSlidePanel',
    children: [],
  },
])

and 

.forRoot([])

it works!

user_76281770
Related