0

我正在使用 Angular 10。在CoreModule课堂上我有组件NavbarComponent。我在组件中有这个 HTML 模板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 "> URL 不会改变。

请帮忙。非常感谢。

4

3 回答 3

0

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

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>

类中的Routes表UsersRoutingModule如下：

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

类中的Routes表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 { }

新项目结构：

在此处输入图像描述

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

于 2020-07-03T14:05:39.113 回答
0

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

<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>
于 2020-07-02T22:37:35.713 回答
0

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

于 2020-07-02T23:15:29.797 回答