Angular 2 routing outlet not catching the menu click

Hello everybody,

I been fighting with this issue for a month with no success and like to know what I’m doing wrong.

Object
At initial start, the user is presented with a login page. After a successful login the user is rerouted to the menu/navigation (works so far). From the navigation the user selects a menu options and have it appear below the menu (this part not working).

problem:
if a user clicks one of the menu link it goes right to the component instead of appearing below the menu bar. example: 'http://192.168.0.16:8080/directory

I search and searched, found lots of examples but now that fits my problem or I’m just not getting it…lol

Any help you can provide would be greatly appreciated.

There’s a lot of code so I’ll copy/past whats pertinent to my issue, if you need more let me know.

service.ts - after successful login it reroutes the user to the navigation.component.ts. this script works

onClickLoginMethod(value: any){            
       this._authService.userAuthentication(value).subscribe(
           user => {    if(user) {
                            this.userInfo = user;                            
                            this.successMessage ="Successfully logged in";                            
                             this._router.navigate(['/']); //<-----------                           
                        }                      
                    },
          error => { 
              this.errorMessage = "Login failed";
              console.log("wtihin userlogin component", JSON.stringify(error)); 
          }          
      )} // END of onClickLoginMethod - method
 

the app.routing. module.ts

const appRouters: Routes = [        
    { path: '', component: NavigationTopComponent},
    { path: 'directory',  component: DirectoryComponent },    
    { path: 'knowledgebase', component: KnowledgebaseComponent },     
    { path: 'login', component: UserLoginComponent },  
    { path: '**', component: PageNotFoundComponent }     
];

this is the navigation component. note: i tried putting router-outlet> below with no success.

@Component({
  selector: 'navigationMenu-top',
  template: `<header>
				<nav class="navbar navbar-inverse container"> 
					<div class="container-fluid"> 
						<div class="navbar-header"> 
							<a routerLink="/" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }"  class="navbar-brand">Dolphon App</a> 
						</div> 
						<ul class="nav navbar-nav"> 
							<li><a routerLink="/" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }" >Dashboard</a></li>							
							<li><a routerLink="/directory" routerLinkActive="active">Directory</a></li>
							<li><a routerLink="/userDashboard" routerLinkActive="active">My Dashboard</a></li>  
							<li><a routerLink="/knowledgebase" routerLinkActive="active">Knowledgebase</a></li>						
						</ul> 
						<ul class="nav navbar-nav navbar-right">
							<li><a routerLink="/login" routerLinkActive="active">Welcome:TestUser</a></li>
						</ul>
					
					</div> 
				</nav>				 
			</header>`
})

app.component.ts

export class AppComponent implements OnInit  { 
 private loggedIN = false;

  constructor(private _router: Router ){}

	 ngOnInit(){
    	let user1 = localStorage.getItem('currentUser');
     	if(user1){
       		this.loggedIN = true;  
			this._router.navigate(['/']);     		
     	}
		else { 
       		this.loggedIN = false; 
			this._router.navigate(['login']);     		
     	}//END of if statement    
  	 }//END ngOnInit

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.