RouterLink 不会在单击时导航到组件，而是在加载同一模块中的其他组件后导航

Posted 2023-02-23

【中文标题】RouterLink 不会在单击时导航到组件，而是在加载同一模块中的其他组件后导航

【英文标题】：RouterLink does not navigate to a component on click but navigates after loading other component in same module

【发布时间】：2020-02-20 23:20:43

【问题描述】：

在我的 Angular 8 应用程序中，我有以下路线。

公共路由模块：

const routes: Routes = [
   path: '', redirectTo: 'login', pathMatch: 'full' ,
   path: 'login', component: LoginComponent ,
   path: 'forgot-password', component: ForgotPasswordComponent ,
   path: 'reset-password', component: ResetPasswordComponent 
];

用户路由模块：

const routes: Routes = [
   path: 'profile', component: UserProfileComponent ,
   path: 'purchase-agreement', component: PurchaseAgreementComponent ,
   path: 'purchase-credit', component: PurchaseCreditComponent ,
   path: 'purchase-confirmation', component: PurchaseConfirmationComponent ,
   path: 'purchase-thankyou', component: PurchaseThankyouComponent ,
   path: 'expenditure-report', component: ExpenditureReportComponent ,
   path: 'subscriptions', component: SubscriptionComponent ,
   path: 'subscribe', component: SubscribeComponent 
];

应用路由模块：

const routes: Routes = [

  
    path: 'startup',
    component: StartupComponent,
    canActivate: [AuthenticationGuardService]
  ,
  
    path: 'account',
    loadChildren: () => import('./modules/core-modules/user/user.module').then(m => m.UserModule),
    canActivate: [AuthenticationGuardService]
  ,
  
    path: '**',
    redirectTo: 'startup',
    pathMatch: 'full'
  
];

我将 routerLinks 导航到 account 路由的标题 Html 和它的子级：

    <mat-menu #accountMenu [overlapTrigger]="false" yPosition="below">
        <button mat-menu-item [routerLink]="['/account/profile']">
            <mat-icon>person</mat-icon><span>My Profile</span>
        </button>
        <button mat-menu-item [routerLink]="['/account/purchase-agreement']">
            <mat-icon>credit_card</mat-icon><span>Purchase Credits</span>
        </button>
        <button mat-menu-item [routerLink]="['/account/expenditure-report']">
            <mat-icon>timeline</mat-icon><span>Expenditure Report</span>
        </button>
        <button mat-menu-item [routerLink]="['/account/subscriptions']">
            <mat-icon>card_membership</mat-icon><span>Subscriptions</span>
        </button>
        <mat-divider></mat-divider>
        <button mat-menu-item (click)="logout()">
            <mat-icon>exit_to_app</mat-icon>Logout
        </button>
    </mat-menu>

应用模块代码：

import  BrowserModule  from '@angular/platform-browser';
import  BrowserAnimationsModule  from '@angular/platform-browser/animations';
import  NgModule  from '@angular/core';
import  HttpClientModule, HTTP_INTERCEPTORS  from '@angular/common/http';

// Helper Classes
import  JwtInterceptor, ErrorInterceptor, LoaderInterceptor  from 'app/_helpers';

// Feature Modules.
import  PublicModule  from 'app/modules/core-modules';

// Shared Functionality Modules.
import  MaterialElementsModule, SharedModule  from 'app/modules/generic-modules';

import  AppRoutingModule, mainRoutedComponents  from './app-routing.module';
import  AppComponent  from './app.component';
import  HeaderComponent, FooterComponent  from 'app/components';


@NgModule(
  declarations: [
    AppComponent,
    HeaderComponent,
    FooterComponent,
    mainRoutedComponents
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    HttpClientModule,
    SharedModule,
    MaterialElementsModule,
    PublicModule,
    AppRoutingModule
  ],
  providers: [
     provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true ,
     provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true ,
     provide: HTTP_INTERCEPTORS, useClass: LoaderInterceptor, multi: true 
  ],
  bootstrap: [AppComponent]
)
export class AppModule  

问题：

登录后，我被带到启动组件，其中标题组件可见。然后我点击我的个人资料链接，它没有加载。但是当我点击它下面的任何其他路线/链接时，我可以导航到这些组件。再次导航到工作组件后，我从标题中单击我的个人资料。这次我将被带到配置文件组件。

这是我在登录后尝试导航到 profile 组件时遇到的控制台错误。

请提供有关此错误的一些见解。怎么解决？

【问题讨论】：

似乎问题与您的路线无关，请检查您的组件，我认为它与将其再次重定向到同一链接的某些服务有关

恐怕，根本没有涉及将其重定向到启动组件的服务

请尝试输入代码或错误，而不是发布照片。它几乎看不见。

【参考方案1】：

我认为，登录后，当您第一次尝试导航到配置文件时，帐户模块未加载，这就是 URL 路径未完成的原因，并且由于此路由而您重定向到启动

    path: '**',
    redirectTo: 'startup',
    pathMatch: 'full'   

您必须确保首先加载您的帐户模块