Angular 8 routlerlink 仅在页面重新加载后才有效

Question

成功登录后，导航到仪表板URL。在该菜单中，即使 URL 在地址栏中发生变化，link 也不起作用。当我们在浏览器中强制重新加载页面时，菜单中的路由器 link 正在工作。否则，什么也不会发生。控制台也没有错误。代码如下。

当前可用的登录导航

    this.usermanagementService.login('login', {username: userName, password})
    .subscribe(message => {
        this.jwt.saveToken(message.data.token);      

        if (window.localStorage.getItem('locale') === null) {
          window.localStorage.setItem('locale', 'en');
        }
        this.router.navigate(['/dashboard']);
// More lines which handles the error section

应用程序菜单html

 <div *ngIf="m.submenus?.length > 0" class="collapse" id="{{ m.name }}" aria-expanded="false">
             <ul class="flex-column pl-2 nav submenu-dark">
                <li *ngFor="let secondlevel of m.submenus" class="nav-item">
                   <a class="nav-link collapsed text-truncate" routerLink="{{ secondlevel.slug }}"><span>{{ secondlevel.name }}</span></a>

                </li>
             </ul>
      </div>

目前路由器link 在我们执行强制重定向而不是 angular 路由器导航后工作。如何解决？

Answer 1

将导航 URL 置于 if 条件或 in else 条件中。或者另一个问题是你的菜单组件没有得到哪个用户正在登录，所以你应该尝试在用户登录时发出事件并订阅菜单组件并设置与登录用户相关的条件。

Answer 2

通过 app.component

中的以下更改修复了问题

<app-header></app-header>
<div *ngIf="router.url !== '/login'; else loginTemplateName" id="wrapper" class="toggled container-margin-fix">
    <app-menu></app-menu>
    <router-outlet></router-outlet> 
    <app-footer></app-footer> 
</div> 
<ng-template #loginTemplateName>
    <app-menu></app-menu>
    <router-outlet></router-outlet> 
    <app-footer></app-footer> 
</ng-template>

在 app-menu 和 app-footer 里面有一个 *ngIf 检查它是否不是登录 url。在这两种情况下，我们都需要在 app.component.html 中添加 app-menu 容器，这样即使它隐藏在 app-menu 中，它也能正常工作。早些时候它只是 <router-outlet> 仅用于 aapp.component.html

中的登录路由

Angular 8 routlerlink 仅在页面重新加载后才有效

Angular 8 routlerlink works only after page reload

angular8

angular-routerlink