Auxiliary outlet makes the whole page refresh in Angular-CodePudding

I'm using auxiliary outlet in my angular project.

In my routing.module.ts I have:

Routing.module.ts

    const routes: Routes = [
    {
        path: '',
        component: XXXComponet,
    },
    {
        path: 'home',
        component: YYYComponet,
    },
    {
        path: 'file-viewer',
        outlet: 'secondary',
        loadChildren: () => import('../../other/app/other.app.module').then((m) =>         m.OtherAppModule),
    },
    {path: '**', canActivate: [AuthGuard], component: PageNotFoundComponent},

I have declared that for route (secondary:file-viewer) I want my other.module to be loaded. Also in my app.html I have this:

App.html:

<div id="main-content-container">
    <router-outlet></router-outlet>
</div>
<router-outlet name="secondary"></router-outlet>

In my other.module file I have this routing declared:

Other.Module:

    {
    path: 'image-viewer',
    component: ImageViewerComponent,
},
{
    path: '',
    component: AppComponent,
    children: [
        {
            path: 'search',
            component: AAAComponent,
            children: [
                {
                    path: 'result',
                    component: BBBViewComponent,
                    data: {needConnections: true},
                },
                {
                    path: '',
                    component: CCCViewComponent,
                    data: {needConnections: true},
                },
            ],
        },
        {
            path: 'explorer',
            component: FFFViewComponent,
            data: {needConnections: true},
        },
        {
            path: 'reporter',
            component: GGGViewComponent,
        },
        {
            path: 'datasets',
            component:KKKViewerComponent,
        }]
}

Now, let me tell you what this is all about: I'm trying to create a file-viewer library. And it is gonna be called from several points of my project. So I decided to use auxiliary routing in my project. So whenever I want my file-viewer to be opened, I'd just:

await this.router.navigate(['', {outlets: {secondary: 'other-file-viewer/image-viewer'}}]);

And it would open it for me.

I also passed skipLocationChange: true to it, so users would not notice url changing. Also some queryParams.

await this.router.navigate(['', {outlets: {secondary: 'other-file-viewer/image-viewer'}}], {
    skipLocationChange: true,
    queryParams: {
        id: params.fileId,
        src: this.getDownloadStreamLink(params.fileId),
    },
});

So basically when the user clicks on a button, url changes from \xx\explorer to xx\explorer(secondary:file-viewer/image-viewer).

And it is working. My component opens when I click on the button. The thing is that it also refreshes what I already have on page. It is basically also refreshing my primary outlet.

How can I avoid this?

Any suggestion is appreciated.

CodePudding user response：

Wasn't angular problem. I had messed up my self.