angular - 角度路由器插座不渲染任何东西

Question

我是角度的初学者。我正在听讲座并动手操作。我按照讲师编写以下代码。但这不会呈现任何内容。请帮助

app.module.ts ：

@NgModule({
  declarations: [
    AppComponent,
    BsNavbarComponent,
    HomeComponent,
    ProductsComponent,
    ShoppingCartComponent,
    CheckOutComponent,
    OrderSucessfulComponent,
    MyOrdersComponent,
    AdminProductsComponent,
    AdminOrdersComponent
  ],
  imports: [
    BrowserModule,
    RouterOutlet,
    AngularFireModule.initializeApp(environment.firebase),
    AngularFireDatabaseModule,
    AngularFireDatabaseModule,

  ],

  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
export const appRoutes: Routes = [

  {path:'',component:HomeComponent},
  {path:'products',component:ProductsComponent},
  {path:'shopping-cart',component:ShoppingCartComponent},
  {path:'check-out',component:CheckOutComponent},
  {path:'order-sucessful',component:OrderSucessfulComponent},
  {path:'login',component:LoginComponent},
  {path:'admin/products',component:AdminProductsComponent},
  {path:'admin/orders',component:AdminOrdersComponent}

  ]


  RouterModule.forRoot(appRoutes);

app.component.html：

<bs-navbar></bs-navbar>

<main role="main" class="container">

  <div class="starter-template">
    <router-outlet></router-outlet>

</main>

Answer 1

在您的导入中，请删除 RouterOutlet 并像这样添加 RouterModule

  imports: [
    BrowserModule,
    RouterModule.forRoot(appRoutes),
    AngularFireModule.initializeApp(environment.firebase),
    AngularFireDatabaseModule,
    AngularFireDatabaseModule,
  ]