Question

我正在尝试创建 rest api 来执行 crud 操作。我正在 angular cli 中添加一条路线以添加员工，但它不起作用。

在 app.module.ts 中存在该组件。它适用于其他组件。

在 angular 应用中也没有点击添加员工链接。

app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { CreateEmployeeComponent } from './create-employee/create-employee.component';
import { EmployeeListComponent } from './employee-list/employee-list.component';

const routes: Routes = [
  /** specify /employees will show which content  */
  { path : 'employees' , component : EmployeeListComponent} , 

  { path : 'create-employee' , component: CreateEmployeeComponent},
  { path : '' , redirectTo: 'employees' , pathMatch: 'full' } 
 
];

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

app-component.html

<nav class="navbar navbar-expand-sm bg-primary navbar-dark">
   <ul class="navbar-nav">
       <li class="nav-item">
           <a router-Link="employees" routerLinkActive="active" class="nav-link"> Employee List</a>
       </li>
       <li class="nav-item">
        <a router-Link="create-employee" routerLinkActive="active" class="nav-link"> Add Employee</a>
       </li>
   </ul>
</nav>

Answer 1

应该是 [routerLink]="['/your-path']"。

<a [routerLink]="['/employees']" routerLinkActive="active" class="nav-link"> Employee List</a>

<a [routerLink]="['/create-employee']" routerLinkActive="active" class="nav-link"> Add Employee</a>

Sample solution on StackBlitz

参考：

RouterLink

Answer 2

它应该是 routerLink="" 而不是 router-Link="" 所以整个代码就像 -

<a routerLink="/employees" routerLinkActive="active" class="nav-link"> Employee List</a>
<a routerLink="/create-employee" routerLinkActive="active" class="nav-link"> Add Employee</a>

我希望你也输入了 <router-outlet></router-outlet>。

角度路由不适用于组件

2 个答案:

参考：