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

Question

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

• app.module.ts

  从“@angular/platform-browser”导入{BrowserModule}；
  从'@angular/core'导入{NgModule}；
  从'./app.component'导入{AppComponent}；
  从'./home/home.component'导入{HomeComponent}；
  从'./login/login.component'导入{LoginComponent}；
  从 '@angular/router' 导入 { RouterModule, Routes };
  
  常量路线：路线= [
    {路径：'home'，组件：HomeComponent}
  ];
  
  @NgModule({
    声明：[
      应用程序组件，
      主页组件，
      登录组件
    ],
    进口：[
      BrowserModule, RouterModule.forRoot(路由)
    ],
    提供者：[]，
    引导程序：[AppComponent]
  })
  导出类 AppModule { }
  

• login.component.html

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

• home.component.html

<p>
  home works!
</p>

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

• 登录.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 { }

您需要在登录 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});

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

希望有用。

Answer 4

将 routerLink 添加到按钮

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

Answer 5

不需要将这些方法写在ts文件中

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

只需在按钮标签中添加 routerLink 属性

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

Answer 6

验证以下步骤是否正确导航

第1步：默认情况下，RouterModule被导入到app-routing.module.ts中

第2步：检查你的app.component.html中是否有以下代码

<router-outlet></router-outlet>

第3步：在app-routing.module.ts中定义正确的路径

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

Answer 7

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

goHome() {
    this.router.navigateByUrl('/home',{replaceUrl:true})
}