2

I am learning angular, in my project my navigation bar I have created routerLink provides for navigating to the page.

 <ul> <li> <a href="#">Home</a></li> <li> <a href="#" [routerLink]="['/about']" >about us</a></li> <li> <a href="#" [routerLink]="['/contact']" >contact us</a></li> </ul>

and this is my app.module.ts , in which I have set router for navigation.

 imports: [ BrowserModule, HttpModule, RouterModule.forRoot([ { path:"**", component: HomeComponent,pathMatch: 'full' }, { path:"about", component: AboutComponent }, { path:"contact" , component: ContactComponent } ]) ],

so, this runs perfectly when I run it goes first to the home page but when I click on about us page and contact page in query string router will change but content not changes, the content of the home page is same as it is, here is my homepage and about us page. this is m home.component.ts

constructor(private _avRoute: ActivatedRoute, private _cmsService: CmsService, private _router: Router) { } ngOnInit() { this.getConsultHome(); } getConsultHome(){ this._cmsService.getcmsConsultHome() ._router.params.subscribe(data =>{ this.data = data } , error => this.errorMessage = error); }

and this is my about.component.ts 

 constructor(private _avRoute: ActivatedRoute, private _cmsService: CmsService, private _router: Router) { } ngOnInit() { this._cmsService.getcmsConsultAbout() .subscribe(data =>{ this.data = data } , error => this.errorMessage = error); }

Please, anyone helps me, I am stuck on the problem.I seen many questions related to this but not as much useful and solve my query, Thanks in advance

Improve this question
4
  • 2
    add code instead of screenshots. Commented Jan 16, 2018 at 7:02
  • @Aravind, Okay.I do it please check again Commented Jan 16, 2018 at 7:19
  • any error in the console? Commented Jan 16, 2018 at 7:28
  • @AkashAgrawal no Commented Jan 16, 2018 at 7:41

3 Answers 3

Reset to default
3 
{ path:"**", component: HomeComponent,pathMatch: 'full' },

Move this line to last :

RouterModule.forRoot([ { path:"about", component: AboutComponent }, { path:"contact" , component: ContactComponent } { path:"**", component: HomeComponent,pathMatch: 'full' }, ])

What it does is , path:"**" this will consider all the paths , no matter what you enter in url, it is being used for 404 page.

path:"**" should be path:"" for home page url , use path:"**" for your 404 page

Ideally your routes should look like this :

RouterModule.forRoot([ { path:"", component: HomeComponent,pathMatch: 'full' }, { path:"about", component: AboutComponent }, { path:"contact" , component: ContactComponent } { path:"**", component: ErrorComponent }, ])

Hope this will clear all your doubts.

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

@BrijeshMavani, Glad to know , Happy Coding Bro :)
from last 2 days I am stuck on problem and finally solve thank you again and also stack overflow
@BrijeshMavani , It happens :)
You are a life saver!
2

You have to add the lifefycle-hook ngOnDestory and unsubscribe your subscriptions. You alos have to add Subscription from 'rxjs'

import { Component, OnInit, OnDestroy } from '@angular/core'; import { Subscription } from 'rxjs/Subscription'; export class YourComponent implements OnInit, OnDestroy { private subscription: Subscription[] = []; ngOnInit() { this.subscription.push(this.customerService.getCustomers().subscribe(customers => { this.customers = customers; })); } ngOnDestroy() { this.subscription.forEach(sub => { sub.unsubscribe(); }); }

}

I hope that helps.

Here is the official documentation: https://angular.io/guide/lifecycle-hooks

Improve this answer

Comments

1

The problem lies withing your defined routes:

{ path:"**", component: HomeComponent, pathMatch: 'full' }

You defined a wildcard as the path to the HomeComponent, which is fine if you want every undefined route to lead to your home screen.

But because you placed it on top of your routes it is always the first route to match no matter what was entered therefore every route leads to the HomeComponent.

Try changing the order to:

RouterModule.forRoot([ { path: 'about', component: AboutComponent }, { path: 'temp', component: TempComponent }, { path: '**', component: HomeComponent } ])

This way the routes "about" and "temp" get matched before the wildcard.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.