私はAngular 10を使用しています。CoreModule
クラスにはコンポーネントがありますNavbarComponent
。NavbarComponent
コンポーネントに次の HTML テンプレートがあります。
<mat-tab-group mat-align-tabs="end">
<mat-tab routerLinkActive>Home</mat-tab>
<mat-tab routerLink="/user/registration"></mat-tab>
<mat-tab>Login</mat-tab>
</mat-tab-group>
リンクをクリックしても何も起こりません。URLは変わりません。ずっと同じhttp://localhost:4200/home
です。モジュールのクラスにはHomeModule
、HTML テンプレートを持つコンポーネントがあります。
<app-navbar></app-navbar>
<app-footer></app-footer>
HomeRoutingModule
クラスには配列が含まれています。
const routes: Routes = [{ path: '', component: HomeComponent }];
AppRoutingModule
クラスには配列が含まれています。
const routes: Routes = [
{
path: 'home',
loadChildren: () => import('./modules/home/home.module').then(m => m.HomeModule)
},
{ path: 'user',
loadChildren: () => import('./modules/users/users.module').then(m => m.UsersModule)
},
{
path: '',
pathMatch: 'full',
redirectTo: 'home'
},
];
UsersRoutingModule
クラスには配列が含まれています。
const routes: Routes = [
{
path: 'user',
component: UsersComponent,
children: [
{
path: 'registration',
data: { title: 'registration' },
component: UserRegistrationComponent,
}
]
}
];
プロジェクト構造:
実行済みにリダイレクトする方法がわかりませんUserRegistrationComponent
。クリックすると:
<mat-tab routerLink ="/user/registration ">
URL は変わりません。
助けてください。どうもありがとうございました。