Question

我正在使用Angular10。在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不变。

请帮助。非常感谢。

Answer 1

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

Pods

自从有了

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

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

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

您可以尝试像这样更改用户模块的路由

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

使之起作用

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

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类中的Routes表如下：

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

AppRoutingModule类中的Routes表如下：

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 { }

新项目结构：

这个项目结构对我来说似乎更好，但重定向仍然无法正常工作

在Mat-tab中的Angular 10`routerLink`不起作用

3 个答案: