时间戳

首页 > 解决方案 > Angular sidenav 似乎在单击的每个链接上都会刷新

angular - Angular sidenav 似乎在单击的每个链接上都会刷新

问题描述

初始视图是一个登录组件。一旦用户登录，他们就会被重定向到“home”组件。Home 组件有一个顶部工具栏，以及一个 sidenav。sidenav 包含用户可以点击的链接。单击链接时，sidenav 似乎没有完全完成“突出显示”动画，但似乎刷新了整个页面。这在 StackBlitz 示例中进行了说明，当在两个链接之间单击时，您可以看到动画停止/刷新。带有按钮的初始视图设置为模仿登录重定向。感谢您的任何意见。

链接到 StackBlitz https://stackblitz.com/edit/angular-ivy-bamdb4?file=src/app/home/home.component.html

标签： angularangular-material

解决方案

这样做的原因是，当您导航时，您会替换整个页面。如果您在文件中放置一个简单的语句，home.component.ts例如：

  ngOnInit() {
    console.log('jancsi ' + Math.random());
  }

如果您每次导航时都打开控制台，您将看到新条目。

您设置路由的方式会导致这种情况，因为您有以下顶级路由：dashboard和userprofile

尝试像这样设置它（家庭的真正子路线）路线：

  {
    path: 'home',
    component: HomeComponent,

    children: [
      {
        path: 'userprofile',
        component: UserProfileComponent
      },
      {
        path: 'dashboard',
        component: DashboardComponent
      }
    ]
  },

还将 routerLink （删除/斜杠）更改为如下所示：

  <a mat-list-item routerLink="dashboard">First Component</a>
  <a mat-list-item routerLink="userprofile">Second Component</a>

动画不会被打断，也不会有新的ngOnInit调用HomeComponent

检查这个Stackblitz

推荐阅读