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

【问题标题】：Angular 8 routlerlink works only after page reloadAngular 8 routlerlink 仅在页面重新加载后才有效
【发布时间】：2020-02-26 00:55:56
【问题描述】：

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

目前有效的登录导航

    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>

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

【问题讨论】：

标签： angular8 angular-routerlink

【解决方案1】：

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

【讨论】：

【解决方案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中的登录路由

【讨论】：