正常にルーティングされた後、コンポーネントのhtmlが表示されないのはなぜですか？

Question

私はAngular 2アプリを開発しています。私は、このアプリケーションの周りをナビゲートするためにルータを作っていました。これは正常に正しいURLに移動しますが、AppComponent以外のコンポーネントのHTMLは実際にレンダリングされません。

route.module.ts

import { DashboardComponent } from './dashboard/dashboard.component'; 
import { LoginComponent } from './login/login.component'; 
import { NgModule }    from '@angular/core'; 
import { RouterModule, Routes } from '@angular/router'; 


const routes: Routes = [ 
    { path: '', redirectTo: 'login', pathMatch: 'full' }, 
    { path: 'login', component: LoginComponent }, 
    { path: ":name", component: DashboardComponent} 
]; 

@NgModule({ 
    imports: [ RouterModule.forRoot(routes) ], 
    exports: [ RouterModule ] 
}) 
export class AppRoutingModule {} 

app.module.ts

import { AppRoutingModule } from './route.module'; 
    import { BrowserModule } from '@angular/platform-browser'; 
    import { NgModule } from '@angular/core'; 
    import { AppComponent } from './app.component'; 
    import { LoginComponent } from './login/login.component'; 
    import { FormsModule } from '@angular/forms'; 
    import { DashboardComponent } from './dashboard/dashboard.component'; 

    @NgModule({ 
     declarations: [ 
     AppComponent, 
     LoginComponent, 
     DashboardComponent 
    ], 
     imports: [ 
     BrowserModule, 
     AppRoutingModule, 
     FormsModule 
     ], 
     providers: [], 
     bootstrap: [AppComponent] 
    }) 
    export class AppModule { } 

login.component.ts

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



@Component({ 
    selector: 'app-login', 
    templateUrl: './login.component.html', 
    styleUrls: ['./login.component.css'] 
}) 
export class LoginComponent implements OnInit { 
name: String; 
pass: String; 
    constructor() { 

    } 

    ngOnInit() { 

    } 

    login(){ 
    if (this.name == "Shai" && this.pass=="jon"){ 
    location.href = "http://localhost:4200/" + this.name; 
    } 
    } 

} 

app.component.ts（一方のみ表示されます）

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

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

app.component.html

<app-login></app-login> 

注：これは、ログインコンポーネントを表示するために取得するために完璧に働いたが、明らかにそれはそれは良いアイデアではありませんこれはどこにでも表示させます。

私のコードで何が間違っているのか分かる人には、本当に感謝しています。

編集：追加テンプレート

login.component.html

<div class="text-center col-sm-2 col-centered" style="padding:50px 0"> 
    <div class="logo"><h1>login</h1></div> 
    <!-- Main Form --> 
    <div class="login-form-1"> 
     <form id="login-form" class="text-left"> 
      <div class="login-form-main-message"></div> 
      <div class="main-login-form"> 
       <div class="login-group"> 
        <div class="form-group"> 
         <label for="lg_username" class="sr-only">Username</label> 
         <input type="text" [(ngModel)]="name" class="form-control" id="lg_username" name="lg_username" placeholder="username"> 
        </div> 
        <div class="form-group"> 
         <label for="lg_password" class="sr-only">Password</label> 
         <input type="password" [(ngModel)]="pass"class="form-control" id="lg_password" name="lg_password" placeholder="password"> 
        </div> 

       </div> 
       <button class="login-button" (click)="login()"><i>Login</i></button> 
     </div> 


     </form> 
    </div> 
    <!-- end:Main Form --> 
</div> 

dashboard.component.html

<p>Dashboard Works</p> 

Answer 1

あなたが角度ルーティングを使用している場合app.component.htmlが持つべき<router-outlet></router-outlet> not <app-login></app-login>。

ルータは次に、入力するパスに基づいて表示するコンポーネントをロードします。 "/ login"または ""はログインコンポーネントを読み込み、<app-login></app-login>をルータのアウトレットに挿入します。

参照：https://angular.io/guide/router#router-outlet

ここでガイドは、アプリを構築し、ルーティングを実装する方法を示します。