路由导航方法未重定向到目标组件

Question

我在使用angular的路由导航方法时遇到问题。我有两个组件：LoginComponent和HomeComponent。当我单击“ login.component.html”中的按钮时，我想重定向到“ home.component.html”。

• app.module.ts

  从“ @ angular / platform-b​​rowser”导入{BrowserModule}；
  从'@ angular / core'导入{NgModule};
  从'./app.component'导入{AppComponent};
  从'./home/home.component'导入{HomeComponent};
  从“ ./login/login.component”导入{LoginComponent}；
  从“ @ angular / router”导入{RouterModule，Routes};
  
  const路线：路线= [
    {路径：“家”，组件：HomeComponent}
  ];
  
  @NgModule（{
    声明：[
      AppComponent，
      HomeComponent，
      LoginComponent
    ]，
    进口：[
      BrowserModule，RouterModule.forRoot（routes）
    ]，
    提供者：[]，
    引导程序：[AppComponent]
  }）
  导出类AppModule {}
  

• login.component.html

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { LoginComponent } from './login/login.component';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  {path: 'home', component: HomeComponent}
];

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    LoginComponent
  ],
  imports: [
    BrowserModule, RouterModule.forRoot(routes)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

• home.component.html

 <button class="btn btn-primary" (click)="goHome();" class="clickable">Home</button>

URL发生更改，但仍保留在同一组件页面中。

• login.component.ts

  import { Component, OnInit } from '@angular/core';
  import { Router } from '@angular/router';
  
  @Component({
    selector: 'app-login',
    templateUrl: './login.component.html',
    styleUrls: ['./login.component.css']
  })
  export class LoginComponent implements OnInit {
  
    constructor(private router:Router) { }
  
    ngOnInit() {
    }
  
     goHome() {
      this.router.navigate(['home']);
    }
  }
  

Answer 1

做这些补充：

<button class="btn btn-primary" (click)="goHome();" class="clickable">Home</button>

    goHome() {
    this.router.navigate(['home']);
  }

或通过<a>.

<a [routerLink]="['/home']">home</a>

如有必要，/如果您打算附加到当前路由，请删除。