Angular sidenav 似乎在每次 link 单击时刷新

Question

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

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

Answer 1

这是因为当您导航时，您会替换整个页面。如果你在 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

Angular sidenav 似乎在每次 link 单击时刷新

Angular sidenav seems to refresh on each link clicked

angular-material

angular