Question

我是Angular 2的新手，我试图让它渲染一个包含其他模板/组件的视图组件。这是我想要在/ home路线上呈现的内容。问题：当我转到/ home路线时，它会转到空白页而不是渲染我的模板。控制台中没有错误。

这是我的 home.component.html ：

<router-outlet></router-outlet>

<container>
  <header-component></header-component>
  <check-portfolio></check-portfolio>
  <portfolio-carousel></portfolio-carousel>
  <skill-section></skill-section>
  <need-help></need-help>
</container>

home.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

以下是 app.module.ts 的部分内容。我不确定我的 app.component.html 中是否需要任何内容，但它是空白的：

const appRoutes: Routes = [
  { path: 'home', component: HomeComponent },
  {
    path: '',
    redirectTo: '/home',
    pathMatch: 'full'
  }
]

@NgModule({
  declarations: [
    AppComponent,
    Container,
    Header,
    CheckPortfolioComponent,
    PortfolioCarouselComponent,
    SkillSectionComponent,
    NeedHelpComponent,
    FooterComponent,
    AboutComponent,
    HomeComponent,
    TitleNavComponent,


  ],
  imports: [
    BsDropdownModule.forRoot(),
    BrowserModule,
    CarouselModule.forRoot(),
    RouterModule.forRoot(
      appRoutes,
      { enableTracing: true }
    )
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

这是我的index.html：

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>LucidWebDream</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>

<body>
  <script>
    window.__theme = 'bs4';
  </script>
  <app-root></app-root>
</body>

</html>

我已经尝试将我的家庭组件放入引导程序阵列，但也没有运气。

更新：如果有帮助，这是git repo：

Answer 1

您应该将<router-outlet></router-outlet>放在app.component.html中，因为您的应用现在引导AppComponent，即使您已定义路由，但由于您没有{，因此无法知道下一步该做什么{1}}在入口点。

Answer 2

你的路线应该是这样的：

该路由将从您的应用程序显示主路由器插座中的组件，如果您想使用家庭组件的路由器插座显示其他组件，您应该像这样编写de router

const appRoutes: Routes = [ 
   {  path: '', redirectTo: 'home', pathMatch: 'full' }
   { path: 'home', component: HomeComponent },
   { path: '**', component: PageNotFoundComponent }, // default route for page not found
]

为什么我的Angular 2路由器没有渲染我的组件？

2 个答案: