Question

我在homeModule中有home组件，在contactModule中有contactUs组件。

当我在contactUs组件中单击“取消”时，它应将我们重定向到“首页”。

路线

import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {RouterModule, Routes} from '@angular/router';
import {homeComponent} from './home/home.component';


const routes: Routes = [
{ path: 'home', component: homeComponent},
{ path: 'demo-ui/home', component: homeComponent},
];


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

我尝试了以下代码，但是没有用

 import { Component, OnInit } from '@angular/core';
 import { FormsModule, Validators, NgForm } from '@angular/forms';
 import { Router } from '@angular/router';


 @Component({
   //some code
 })
export class contactUsComponent implements OnInit {
constructor( private router: Router ){
}

ngOnInit() {
}


redirect(){
this.router.navigateByUrl('/home');    }

}
 //html
 <button class="btn btn-primary" type="button"  (click)="redirect()"> 
  Cancel </button>

我也尝试过

<button class="btn btn-primary" type="button"  [routerLink]="['/home']"> Cancel </button>

和

<button class="btn btn-primary" type="button"  routerLink="/home"> Cancel </button>

错误：无法匹配任何路由。网址段“ ./home”

Answer 1

在.ts中创建功能

赞：

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

并调用您的html

<button (click)="redirectToHome()">Cancel</button>

Answer 2

您需要使用锚标签来使routerLink正常工作。

<a class="btn btn-primary" role="button" routerLink="/home">Cancel</a>

Answer 3

您可以使用：this.router.navigate（['home']）;

从一个模块组件到另一个模块组件的Angular 5导航

3 个答案: