Angular4中的路线导航没有反应

Question

我制作了一个 Angular4 组件，它生成的页面有一个按钮可以导航到另一个页面。我没有收到任何错误，并且 pageUrl 发生了变化，但页面内容保持不变。

这是我的代码：

app.component.ts

import { Component } from '@angular/core';
import { Router } from "@angular/router";

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

export class AppComponent {

constructor(private router: Router){}

username = "";
password = "";
log = function () {
   if (this.username != "" && this.password != "") {
     console.log(this.username + "   " + this.password);
     this.router.navigate(['/dashboard']);
   }
}
}

app.module.ts

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

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


@NgModule({
  declarations: [
    AppComponent,
    DashboardComponent,
  ],
  imports: [
     BrowserModule,
     FormsModule,
     RouterModule.forRoot([
   {
    path: 'dashboard',
    component: DashboardComponent
   }
 ]
 )
 ],
 providers: [],
 bootstrap: [AppComponent],
 })
 export class AppModule {
 }

app.component.html

<div class="outer-container">
  <div class="inner-container">
   <div class="centered-content">
     <div class="center"><img src="../favicon.png"></div>
      <label class="addText"> Username: </label><input [(ngModel)] 
        ="username" class="addText"><br>
      <label class="addText"> Password: </label><input [(ngModel)] 
        ="password" type="password" class="addText"><br>
      <div class="center"><button (click) ="log()">Log in</button></div>
     </div>
  </div>
</div>

Answer 1

要实现你想要的，让app.component 只包含路由器插座：

@Component({
  selector: 'app-root',
  template: `
        <!-- Views go here-->
        <router-outlet></router-outlet>     
  `,
})
export class AppComponent { }

然后为您想要的每个视图创建一个单独的组件。所以在你的情况下，你想创建一个LoginComponent，然后从那里路由到DashboardComponent。

PS 当然，这是可扩展的，您可以在AppComponent html 中添加标题组件标签，或者其他任何内容等等。但只是为了展示这个简单的用例。

Answer 2

您需要指定显示仪表板组件的位置
添加此标签以告诉 Angular 显示路由器组件结果的位置

<router-outlet></router-outlet>