链接适用于角度 8、10 和 11，但不适用于角度 12

Question

我的链接可以在 Angular 8 中使用，但是在 Angular 12 中它们不再起作用了。 尝试了我读过的几件事，但没有成功

html

<li class="nav-item">
  <a class="nav-link" routerLink="pedidos" routerLinkActive="active">Pedidos</a>
</li>
<li class="nav-item">
  <a class="nav-link" routerLink="detalles" routerLinkActive="active">detalles</a>
</li>
<!-- it does not work -->
<!-- <li class="nav-item">
    <a [routerLink]="['/pedidos']" >
        link to user component
      </a>
</li>           -->
<!-- it does not work -->
<!-- <li class="nav-item">
    <a routerLink="/pedidos" >
        link to user component
      </a>
</li>    -->
<!-- it does not work -->
<!-- <li class="nav-item">
    <a routerLink="pedidos" >
        link to user component
      </a>
</li>              -->
<!-- it does not work -->
<!-- <li class="nav-item">
    <a [routerLink]="['/pedidos']">Link</a>
</li> -->

应用程序路由模块

const routes: Routes = [
  { path: 'pedidos', component: PedidosComponent },
  { path: 'detalles', component: DetallesComponent },
  { path: '', component: PedidosComponent }
];

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

发生什么了？ 以及如何使链接起作用？

这是 tsconfig

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2017",
    "module": "es2020",
    "lib": [
      "es2018",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true
  }
}

你能看到那里的东西吗？

********************************* 更新 **************** **********

在 Angular 14 上

app.component.html

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">LENGUAJES 3</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav me-auto mb-2 mb-lg-0">         
          <li class="nav-item">
            <a class="nav-link" routerLink = "pedidos" routerLinkActive="active">Pedidos</a>
          </li>                    
        </ul>        
      </div>
    </div>
  </nav>
  <router-outlet></router-outlet>

应用程序路由

const routes: Routes = [  
  { path: 'pedidos', component: PedidosComponent },
  { path: 'detalles/:id', component: DetallesComponent },
  { path: 'nuevo-pedido', component: NuevoPedidoComponent },
  { path: 'editar-pedido/:id', component: EditarPedidoComponent },  
  { path: 'borrar-pedido', component: BorrarPedidoComponent },
  { path: 'nuevo-detalle', component: NuevoDetalleComponent }
  
];