[英]Angular routerLink does not navigate to the corresponding component
[英]RouterLink does not navigate to a component on click but navigates after loading other component in same module
在我的 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'
}
];
Header Html 我在其中放置了 routerLinks 以導航到account
路由及其子節點:
<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 { }
問題:
登錄后,我被帶到啟動組件,其中 header 組件可見。 然后我點擊我的個人資料鏈接,它沒有加載。 但是當我點擊它下面的任何其他路線/鏈接時,我可以導航到這些組件。再次導航到工作組件后,我從 header 中單擊我的配置文件。 這次我被帶到配置文件組件。
這是我在登錄后嘗試導航到我的profile
組件時遇到的控制台錯誤。
請提供有關此錯誤的一些見解。 如何解決?
我認為,登錄后,當您第一次嘗試導航到配置文件時,帳戶模塊未加載,這就是 URL 路徑未完成並且由於此路線而重定向到啟動的原因
{
path: '**',
redirectTo: 'startup',
pathMatch: 'full' }
您必須確保首先加載您的帳戶模塊
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.