Angular 5 navigation from one module component to another module component

Question

I have home component in homeModule and contactUs componenent in contactModule.

When I click cancel in contactUs component, it should redirect us to Home.

routes

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

I tried the following code but it didnt work

 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>

Also, I tried

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

and

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

Error: Cannot match any routes. URL Segment './home'

Answer 1

您需要使用锚标记才能使routerLink正常工作。

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

Answer 2

Create function in your .ts

Like this :

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

and call into your html

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

Answer 3

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