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

Question

我有一个问题，使用路由导航方法的角度。我有两个组件：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 { }

 <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

添加以下内容：

主页

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

或通过。

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

如果需要，请删除/（如果您希望被追加到当前路由）。