成功路由到组件后，为什么我的组件的html无法显示？

Question

I'm developing an Angular 2 app and I made a router to navigate around the app. While it will successfully go to the correct urls, it won't actually render the html of any component other than AppComponent.

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 (the only one that will display)

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>

Note: This worked perfectly for getting the login component to display but obviously it causes it to display everywhere which isn't a good idea.

I will be very grateful to anybody who can figure out what's wrong with my code.

Edit: Added Templates

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

If you are using angular routing then app.component.html should have <router-outlet></router-outlet> not <app-login></app-login> .

Then router then loads the component you want to view based on the path you enter, IE "/login" or "" will load the login component, and inject <app-login></app-login> into the router outlet.

See: https://angular.io/guide/router#router-outlet

The guide here shows you how to structure an app, and implement the routing.