Javascript 为什么我的组件的html在成功路由到它之后不显示？

我正在开发一个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 {}

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

app.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 {}

    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（将显示的唯一一个）

app.component.html

<app-login></app-login>

<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>

<p>Dashboard Works</p>

注意：这对于让登录组件显示非常有效，但显然它会导致它显示在任何地方，这不是一个好主意

我将非常感谢任何能找出我的代码错误的人

编辑：添加模板

login.component.html

<app-login></app-login>

<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>

<p>Dashboard Works</p>

登录
用户名
密码
登录

dashboard.component.html

<app-login></app-login>

<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>

<p>Dashboard Works</p>

仪表板工作正常

---

如果您使用的是角度布线，则app.component.html应该具有

而不是

这里的指南向您展示了如何构建应用程序和实现路由。
您也可以展示模板吗？我按照您的要求添加了模板，但我不知道它们会有什么帮助。@Vega您是什么意思？登录组件功能正常，但当我转到任何页面时，它不会显示html。让html显示的唯一方法是使用app.component.html文件中的选择器。现在可以完美地工作了。非常感谢。