` mat-tab`中的Angular 10 `routerLink`不工作

Question

我使用的是Angular 10。在CoreModule类中，我有一个组件NavbarComponent。我在NavbarComponent组件中有这个超文本标记语言模板：

<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 ">网址不会改变。

请帮帮忙。非常感谢。

Answer 1

与您的路线相关，这将会起作用

<mat-tab routerLink="/user/user/registration"></mat-tab>

因为你有

{ path: 'user',
 loadChildren: () => import('./modules/users/users.module').then(m => m.UsersModule)
},

因此，/user将加载延迟加载的模块，然后加载第二个/user

{
path: 'user',
component: UsersComponent,
children: [
  {
    path: 'registration',
    data: { title: 'registration' },
    component: UserRegistrationComponent,
  }
]
}

您可以尝试更改用户的模块路由，如下所示

{
path: '',
component: UsersComponent,
children: [
  {
    path: 'registration',
    data: { title: 'registration' },
    component: UserRegistrationComponent,
  }
]
}

要想让它工作

<mat-tab routerLink="/user/registration"></mat-tab>

Answer 2

URL仍然不会改变:(我按照你写的那样做了。在UsersRoutingModule类中，我更改了

const routes: Routes = [
  {
    path: '',
    component: UsersComponent,
    children: [
      {
        path: 'registration',
        data: { title: 'registration' },
        component: UserRegistrationComponent,
      }
    ]
  }
];

在HTML模板<mat-tab routerLink="/user/registration"></mat-tab>中，我仍然不知道如何改进到UserRegistrationComponent的重定向

Answer 3

我修改了项目结构。我希望仅在单击按钮后才加载用户模块，但它仍然不起作用

HTML模板navbar.component.html：

<mat-tab-group mat-align-tabs="end">
    <mat-tab routerLinkActive>Home</mat-tab>
    <mat-tab routerLink='user/registration'></mat-tab>
</mat-tab-group>

UsersRoutingModule类中的路由表如下：

const routes: Routes = [
  {
    path: '',
    component: UsersComponent,
    children: [
      {
        path: 'registration',
        data: { title: 'registration' },
        component: UserRegistrationComponent,
      }
    ]
  }
];

AppRoutingModule类中的路由表如下：

const routes: Routes = [
  {
    path: 'user',
    loadChildren: () => import('./modules/users/users.module').then(m => m.UsersModule)
  },
  {
    path: '',
    component: AppComponent,
  }
];

HTML模板app.component.html：

<app-navbar></app-navbar>
<app-footer></app-footer>

app.module.ts：

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    HttpClientModule,
    AppRoutingModule,
    CoreModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

新建项目结构：

​

​

这个项目结构对我来说似乎更好，但重定向仍然不起作用