javascript - 路由导航方法不重定向到目标组件

Question

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

• app.module.ts

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

• login.component.html

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

• home.component.html

<p>
  home works!
</p>

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>

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