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

问题描述

这是我的应用模块文件

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/add 它的显示

“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>

任何帮助表示赞赏！我已经坚持了很长时间。

标签： javascriptangularrest

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

问题描述

解决方案

推荐阅读