angular - Angular 组件始终显示根视图

Question

当我尝试转到 /contacts 时，它可以工作，但它显示的是 AppComponent（app.component.html）而不是 ContactsComponent（contacts.component.html）的 html 代码，我不知道问题是否出在路线或其他地方别的 。

应用程序路由.module.ts ：

 import { NgModule } from '@angular/core';
    import { RouterModule, Routes } from '@angular/router';
    import { ContactsComponent } from './contacts/contacts.component';

    const routes: Routes = [
      { path: 'contacts', component: ContactsComponent }
    ];

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

app.module.ts ：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import {MatFormFieldModule} from '@angular/material/form-field';
import {MatTableModule} from '@angular/material/table';
import {MatInputModule} from '@angular/material/input';
import { ContactsComponent } from './contacts/contacts.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {FormsModule} from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent,
    ContactsComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    AppRoutingModule,
    MatFormFieldModule,
    MatTableModule,
    MatInputModule,
    BrowserModule,
    FormsModule,
    BrowserAnimationsModule,
    BrowserModule,
    FormsModule,
    AppRoutingModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

标签： angularangular8