角形路由器插座不会渲染任何东西

时间:2018-07-06 11:32:37

标签: angular router-outlet

我是angular的初学者。我正在听讲座并进行动手操作。我在讲师之后编写了以下代码。但这没有任何效果。请帮忙

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>

1 个答案:

答案 0 :(得分:0)

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

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