アングル4でコンポーネントビューが表示されない

Question

アングル4を使用することを学習していて、1つ以上のテンプレートをレンダリングできない場合は、開始アプリケーションテンプレートはOKでレンダリングがうまくいきましたが、 gコンポーネントnewComponent "と表示され、何も表示されません。私は、ブラウザで新しいコンポーネントのURLを入力することができ、それがエラーなしで罰金ナビゲートし、それは常に私のファイルは、このようなものですapp.component.html表示されます。

app.component.html

<!--The content below is only a placeholder and can be replaced.--> 
<p> 
    ASDASDASDAS 
</p> 

アプリを.component.ts

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

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.less'] 
}) 
export class AppComponent { 
} 

app.module.ts

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { RouterModule, Routes } from '@angular/router'; 

import { AppComponent } from './app.component'; 
import { LoginComponent } from './login/login.component'; 
import { DashboardComponent } from './dashboard/dashboard.component'; 

const appRoutes: Routes = [ 
    { path: 'login', component: LoginComponent }, 
    { path: 'dashboard', component: DashboardComponent } 
]; 

@NgModule({ 
    declarations: [ 
    AppComponent, 
    LoginComponent, 
    DashboardComponent 
    ], 
    imports: [ 
    BrowserModule, 
    RouterModule.forRoot(
     appRoutes, 
     { enableTracing: true } 
    ) 
    ], 
    providers: [], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 

dashboard.component.html

<p> 
    dashboard works! 
</p> 

dashboard.componentspec.ts

import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 

import { DashboardComponent } from './dashboard.component'; 

describe('DashboardComponent',() => { 
    let component: DashboardComponent; 
    let fixture: ComponentFixture<DashboardComponent>; 

    beforeEach(async(() => { 
    TestBed.configureTestingModule({ 
     declarations: [ DashboardComponent ] 
    }) 
    .compileComponents(); 
    })); 

    beforeEach(() => { 
    fixture = TestBed.createComponent(DashboardComponent); 
    component = fixture.componentInstance; 
    fixture.detectChanges(); 
    }); 

    it('should be created',() => { 
    expect(component).toBeTruthy(); 
    }); 
}); 

dashboard.component.ts

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

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

    constructor() { } 

    ngOnInit() { 
    } 

} 

マイログインコンポーネントは似ている、と私の3つのコンポーネントが同じ表示されます。

ASDASDASDASを

私の問題がどこにあるのかわかりません。コンソールにエラーメッセージがありません。私のプロジェクト構造は次のとおりです。

-src 
--app 
---dashboard 
----dashboard.component.html 
----dashboard.component.less 
----dashboard.component.spec.ts 
----dashboard.component.ts 
---login 
----login.component.html 
----login.component.less 
----login.component.spec.ts 
----login.component.ts 
--app.component.html 
--app.component.less 
--app.component.spec.ts 
--app.component.ts 
--app.module.ts 

は、私は完全に分離ビューの私の目的のために異なるNgModulesが必要ですか？私は、 "ログイン"、別の "ダッシュボード"、idkのための別のページ、新しいページ...など、私は分割されたビューを持つためのそれぞれのNgModuleが必要なページをしたいのですか？

ご迷惑をおかけして申し訳ありません。

Answer 1

他のコンポーネントがレンダリングされる場所を定義するには、<router-outlet></router-outlet>をapp.component.htmlに配置する必要があります。

app.component.htmlコンテンツの例：

<div class="app"> 
    <app-header></app-header> 

    <router-outlet></router-outlet> 

    <app-footer></app-footer> 
</div> 

あなたはhere詳細を読むことができます。