Question

我在使用angular的路由导航方法时遇到了问题。我有两个组件：LoginComponent和HomeComponent。当我点击＆＃34; login.component.html＆＃34;中的按钮时，我希望被重定向到＆＃34; home.component.html＆＃34;。

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

＆＃13;

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

＆＃13;

的 home.component.html

＆＃13;

<p>
  home works!
</p>

＆＃13;

网址会发生变化，但会保留在同一个组件页面中。

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>

如果您打算将其附加到当前路线，请删除/。

Answer 2

首先，您需要像这样在app.routing.modules.ts中定义路由：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  { path: 'Home', loadChildren: () => import('./Home/Home.module').then(m => m.HomeModule) },
  {
path: '',
redirectTo: '',
pathMatch: 'full'
}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

您需要在Login ts文件中执行此操作：

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

和

<button (click)="goHome()">Home</button>

在登录HTML文件中

或者只是：

<button [routerLink]="'home'">Home</button>

在登录html文件中。

Answer 3

如果要在模板中加载多个路径，则可以在app.component模板中使用：

 <router-outlet> <router-outlet>

如果要加载嵌套路由，请尝试使用：

constructor(private routes: ActivatedRoute) {}
|
|
|
this.route.navigate(['home'], {relativeTo: this.routes});

并在a标签中使用routerLink指令，然后传递路径中指定的路径

希望它有用。

Answer 4

将 routerLink 添加到按钮

<button routerLink="/home">Home</button>

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

4 个答案: