Angular 2ルータがコンポーネントをレンダリングしないのはなぜですか？

私はAngular 2を初めて使用しており、他のテンプレート/コンポーネントを保持するビューコンポーネントをレンダリングしようとしています。これは私が/ homeルートでレンダリングしたいものです。問題：/ homeルートに行くと、テンプレートをレンダリングするのではなく空白のページに移動します。コンソールにエラーはありません。ここに私のapp.module.tsのいくつかの部分があるAngular 2ルータがコンポーネントをレンダリングしないのはなぜですか？

<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() { } }

：

は、ここに私のhome.component.htmlです。私は私が私の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は次のとおりです。

出典

2017-10-27 Dream_Cap

私はあなたのapp.component.htmlにを入れておきます。 – guramidev

@Dream_Cap guramidevによると、あなたのapp.componentはあなたのエントリーコンポーネントです。 'を持たないため、あなたのルータはあなたの' HomeComponent'をロードする場所を知らない – LLai

ありがとう@guramidev。あなたが答えを入れたら、それにチェックをつけます。 –

<router-outlet></router-outlet>はapp.component.htmlになりました。あなたのアプリは今やブートストラップAppComponentであり、経路が定義されているにもかかわらず、エントリポイントに<router-outlet></router-outlet>がないため、次に何をするか分からないためです。

出典

2017-10-27 14:14:10 guramidev

あなたはルートは次のようになります。ルートは、あなたのアプリからメインルータ、アウトレットでコンポーネントを表示しようとしていることを

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 
    ]

出典

2017-10-27 13:32:17 Ricardo

ありがとう、私はルートの順序を切り替えてみましたが、それでも同じ効果がありました。ルートアプリケーションコンポーネントにが必要でした。 –

Angular 2ルータがコンポーネントをレンダリングしないのはなぜですか？

答えて

関連する問題