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>

所以由于某种原因，当我转到本地主机：4200 / client /添加其显示内容时

“ client-info起作用”，它是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

尝试重新排序您的路线，以使路径：“ client / add”在路径列表中的路径：“ client /：id”之前。

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

根据Angular Routing Documentation

路线顺序

路由的顺序很重要，因为路由器在匹配路由时会使用“先赢”策略，因此，应将更具体的路由放在不那么具体的路由之上。首先列出具有静态路径的路由，然后列出与默认路由匹配的空路径路由。通配符路由排在最后，因为它匹配每个URL，并且只有在没有其他路由最先匹配时，路由器才会选择通配符路由。

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

1 个答案: