为什么我的组件 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

如果您正在使用 angular 路由，那么 app.component.html 应该 <router-outlet></router-outlet> 而不是 <app-login></app-login>。

然后router会根据你输入的路径加载你要查看的组件，I.E. "/login" 或 "" 将加载登录组件，并将 <app-login></app-login> 注入路由器出口。

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

此处的指南向您展示了如何构建应用程序并实现路由。

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

Why is the html of my components not displaying after successfully routing to it?

javascript

angular2-forms

angular2-template

angular2-routing

angular