Angular 无法使用路由导航到组件

Question

我有 2 个组件，并且添加了路由，但是，只有 1 个组件可用于导航。无法导航到另一个组件，我想知道问题是什么？我将在下面粘贴我的应用程序模块、我的应用程序路由模块，最后是我的 html 模板。

我的 2 个组件分别命名为“view-emp”和“edit-emp”。 edit-emp 工作正常，view-emp 不工作。当我单击 link 导航到 view-emp 时，没有任何反应，我只是停留在主屏幕上。但是，当我单击 edit-emp link 时，我确实导航到 4200/edit-emp 并且我确实看到了组件

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ViewEmpComponent } from './view-emp/view-emp.component';
import { EditEmpComponent } from './edit-emp/edit-emp.component';

@NgModule({
  declarations: [
    AppComponent,
    ViewEmpComponent,
    EditEmpComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

应用-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ViewEmpComponent } from './view-emp/view-emp.component';
import { EditEmpComponent } from './edit-emp/edit-emp.component';

const routes: Routes = [
  {path: 'view-emp', component: ViewEmpComponent},
  {path: 'edit-emp', component: EditEmpComponent}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

app.component.html

<p>ello welcome to angular routing</p>

<nav>
    <ul>
      <a routerLink="/view-emp" routerLinkActive="active">View employee</a>
      <a routerLink="/edit-emp" routerLinkActive="active">Edit employee</a>
    </ul>
  </nav>

<router-outlet></router-outlet>

Answer 1

您可以尝试在 app.module.ts 导入中添加 CommonModule 吗？

Angular 无法使用路由导航到组件

Angular component cannot be navigated to with routing

typescript

angular