即使路径正确，routerLink 也不显示正确的 HTML

Question

这是我的应用模块文件

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { FlashMessagesModule } from 'angular2-flash-messages';
import { FormsModule } from '@angular/forms';
import { environment } from '../environments/environment';
import { AngularFireModule } from '@angular/fire';
import { AngularFirestoreModule } from '@angular/fire/firestore';
import { AngularFireAuthModule } from '@angular/fire/auth';

import { AppComponent } from './app.component';
import { LoginComponent } from './components/login/login.component';
import { NavbarComponent } from './components/navbar/navbar.component';
import { DashboardComponent } from './components/dashboard/dashboard.component';
import { AddFoodComponent } from './components/add-food/add-food.component';
import { EditClientComponent } from './components/edit-client/edit-client.component';
import { ClientInfoComponent } from './components/client-info/client-info.component';
import { ClientComponent } from './components/client/client.component';
import { RegisterComponent } from './components/register/register.component';
import { SidebarComponent } from './components/sidebar/sidebar.component';

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    NavbarComponent,
    DashboardComponent,
    EditClientComponent,
    ClientInfoComponent,
    RegisterComponent,
    ClientComponent,
    AddFoodComponent,
    SidebarComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    AngularFireModule.initializeApp(
      environment.firebaseConfig,
      'calorie-counter'
    ),
    AngularFirestoreModule,
    AngularFireAuthModule,
    FlashMessagesModule.forRoot(),
    FormsModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

这是我的 app-routing.module 文件

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { ClientInfoComponent } from './components/client-info/client-info.component';
import { DashboardComponent } from './components/dashboard/dashboard.component';
import { EditClientComponent } from './components/edit-client/edit-client.component';
import { LoginComponent } from './components/login/login.component';
import { NavbarComponent } from './components/navbar/navbar.component';
import { ClientComponent } from './components/client/client.component';
import { RegisterComponent } from './components/register/register.component';
import { AddFoodComponent } from './components/add-food/add-food.component';

const routes: Routes = [
  { path: '', component: DashboardComponent },
  { path: 'client', component: ClientComponent },
  { path: 'client/edit/:id', component: EditClientComponent },
  { path: 'login', component: LoginComponent },
  { path: 'navbar', component: NavbarComponent },
  { path: 'client/:id', component: ClientInfoComponent },
  { path: 'register', component: RegisterComponent },
  { path: 'client/add', component: AddFoodComponent },
];

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

这是我试图显示但未显示的组件 html，而是显示另一个组件的 html

这是我在运行 localhost:4200/client/add 时要生成的 html，代码如下：

文件：add-food-component.html

<div class="row">
  <div class="col-md-6">
    <a routerLink="/" class="btn btn-link">
      <i class="fa fa-arrow-circle-o-left"></i> Back To Dashboard
    </a>
  </div>
  <div class="col-md-6"></div>
</div>

<div class="card">
  <div class="card-header">
    Add Client
  </div>
  <div class="card-body">
    <form #foodForm="ngForm" (ngSubmit)="onSubmit(foodForm)">
      <div class="form-group">
        <label for="foodName">First Name</label>
        <input
          type="text"
          class="form-control"
          name="foodName"
          #fName="ngModel"
          [ngClass]="{ 'is-invalid': fName.errors && fName.touched }"
          [(ngModel)]="client.food"
          minlength="2"
          required
        />

        <div [hidden]="!fName.errors?.required" class="invalid-feedback">
          Food required
        </div>

        <div [hidden]="!fName.errors?.minlength" class="invalid-feedback">
          Must be at least 2 characters
        </div>
      </div>

      <div class="form-group">
        <label for="calories">Calories</label>
        <input
          type="text"
          class="form-control"
          name="calories"
          #calories="ngModel"
          [ngClass]="{ 'is-invalid': calories.errors && calories.touched }"
          [(ngModel)]="client.calories"
          minlength="2"
          required
        />

        <div [hidden]="!calories.errors?.required" class="invalid-feedback">
          Last name required
        </div>

        <div [hidden]="!calories.errors?.minlength" class="invalid-feedback">
          Must be at least 2 characters
        </div>
      </div>

      <input type="submit" value="Submit" class="btn btn-primary btn-block" />
    </form>
  </div>
</div>

所以由于某种原因，当我转到路线 localhost:4200/client/添加它的显示时

“client-info works”是client-info.component.html的html组件

我的路由是

<a routerLink="/client/add" class="btn btn-success btn-block">
  <i class="fa fa-plus"></i> Add
</a>

感谢任何帮助！！！卡在这上面很久了。

Answer 1

尝试重新排序您的路线，使 path:'client/add' 在您的路线列表中的 path:'client/:id' 之前。

Angular 路由器按顺序处理路由并获取第一个匹配项。 'client/add' 可以解释为 'client/:id' 其中 ':id' 映射到 'add'。因此，它会将其作为列表中的第一个匹配项。

根据Angular Routing Documentation

路线顺序

路由的顺序很重要，因为Router在匹配路由时使用先匹配获胜策略，所以更具体的路由应该放在不太具体的路由之上。首先列出具有静态路径的路由，然后是与默认路由匹配的空路径路由。通配符路由位于最后，因为它匹配每个 URL，并且只有在没有其他路由首先匹配时，路由器才会选择它。