辅助插座使整个页面刷新在 Angular

Question

我在 angular 项目中使用辅助插座。

在我的 routing.module.ts 我有：

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},

我已声明要为路线 (secondary:file-viewer) 加载我的 other.module。在我的 app.html 中还有这个：

App.html:

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

在我的 other.module 文件中，我声明了这个路由：

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,
        }]
}

现在，让我告诉你这是怎么回事：我正在尝试创建一个文件查看器库。它将从我项目的几个点调用。所以我决定在我的项目中使用辅助路由。所以每当我想打开我的文件查看器时，我只是：

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

它会为我打开它。

我也将 skipLocationChange: true 传递给它，因此用户不会注意到 url 发生了变化。还有一些查询参数。

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

所以基本上当用户点击一个按钮时，url 从 \xx\explorer 变为 xx\explorer(secondary:file-viewer/image-viewer)。

它正在运行。单击按钮时我的组件打开。问题是它还会刷新我在页面上已有的内容。它基本上也刷新了我的主要出口。

我怎样才能避免这种情况？

欢迎任何建议。

Answer 1

不是 angular 问题。我把自己搞砸了。

辅助插座使整个页面刷新在 Angular

Auxiliary outlet makes the whole page refresh in Angular

angularjs

angular