Fatal编程技术网
  • javascript/
  • Javascript 为什么我的Angular 2路由器不渲染我的组件？

Javascript 为什么我的Angular 2路由器不渲染我的组件？

javascript angular typescript

Javascript 为什么我的Angular 2路由器不渲染我的组件？,javascript,angular,typescript,Javascript,Angular,Typescript,我是Angular 2的新手，正在尝试让它渲染包含其他模板/组件的视图组件。这就是我希望在/home路径上渲染的内容问题：当我转到/home路径时，它会转到空白页，而不是呈现我的模板。控制台中没有错误 这是我的home.component.html： <router-outlet></router-outlet> <container> <header-component></header-component> <che

我是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>
下面是我的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>


清醒梦
窗口。主题='bs4'；

如果有帮助的话：
您的路线应该如下所示：


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


该路由将在应用程序的主路由器出口中显示组件，如果您想使用路由器出口从主路由器组件显示其他组件，您应该像这样编写反路由器


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



你应该把
放在
app.component.html
中，因为你的应用程序现在引导
AppComponent
，即使你已经定义了路由，它也不知道下一步该怎么做，因为你的入口点中没有
。
我相信你应该放在app.component.html中。@Dream\u Cap正如古拉米德夫所说，你的app.component是你的入口组件。由于它没有
，您的路由器不知道在哪里加载您的
家庭组件
，非常感谢@guramidev。如果你输入答案，我会打勾。@Dream\u Cap好的，分数不会有坏处，谢谢！：但是我试着改变路线的顺序，结果还是一样的。我需要在我的根应用程序组件。

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