Question

在Angular 5应用程序中，我看到一个间歇性问题，我的菜单链接（路由器）无法打开新页面。相反，页面排序退出视图。如果我向下滚动，我可以看到同一页面是一个很大的空白区域。

URL确实会更改为新页面，但不会呈现内容。

以下是代码片段：

<mat-list-item
    sideNavAccordion
    class="sidebar-list-item"
    role="listitem"
    *ngIf="!item.disabled && item.type !== 'separator' && item.type !== 'icon'"
    [ngClass]="{'has-submenu': item.type === 'dropDown'}"
    routerLinkActive="open">
      <a routerLink="/{{item.state}}" *ngIf="item.type === 'link'">
        <span
        class="menu-item-tooltip"
        [matTooltip]="item.tooltip"
        matTooltipPosition="right"></span>
        <mat-icon>{{item.icon}}</mat-icon>
        <span>{{item.name}}</span>
      </a>

...

app.routes.ts摘录：

<!-- language: lang-ts -->

    export const rootRouterConfig: Routes = [
        {
            path: '',
            loadChildren: './views/home/home.module#HomeModule',
        },
        {
            path: '',
            component: AdminLayoutComponent,
            canActivate: [ AuthGuard ],
            children: [
                {
                    path: 'page1',
                    loadChildren: './views/test/test.module#TestModule',
                    data: { title: 'page 1', breadcrumb: 'page1'}
                },
        {
            path: 'page2',
            loadChildren: './views/manage/manage.module#ManageModule',
            data: { title: 'page 2', breadcrumb: 'page2'}
        },
    }
]

更新：我相信当签名用户的令牌过期时会发生这种情况。只有在用户通过身份验证时才会显示的菜单项正在出现，并且它们是（我认为）显示问题的那些菜单项。您认为他们只是像往常一样工作，AuthGuard会将用户引导到登录页面，但这不是正常情况。我想如果我能正确显示菜单，就不会出现这个问题。

Answer 1

export const rootRouterConfig: Routes = [
    {
        path: '',
        loadChildren: './views/home/home.module#HomeModule',
    },
    {
        path: '',
        component: AdminLayoutComponent,
        canActivate: [ AuthGuard ],
        children: [
            {
                path: 'page1',
                loadChildren: './views/test/test.module#TestModule',
                data: { title: 'page 1', breadcrumb: 'page1'}
            },
            {
                path: 'page2',
                loadChildren: './views/manage/manage.module#ManageModule',
                data: { title: 'page 2', breadcrumb: 'page2'}
             }]
       }
]

app.routes.ts中的儿童错误]

菜单中的Angular router链接无法打开新页面

1 个答案: