Angular 2 - working with routers and navigation - issue

[robin01]

Hello everybody,

Very new to Angular 2 and still learning. My objective is to have the user Logon.component.ts and have the user redirected to home.componet.ts which has the navigation.compoent.ts. For testing I have a button in the login.component.ts to redirect the user to the home.component.ts and this works. Problem is the navigation links, every time i click the button it goes back to the router-outlet located in app.component. after the redirect to the home.componet.ts which has the navigation.component.ts to remain on this page and process the links with out going back to the app.component.

assuming its going back due to the router-outlet found in the app.component. I tried different was to resolve this with no success.
any help you can provide would be greatly appreciated. thank you.

import { Component } from '@angular/core';

@Component({
	selector: 'my-app',
  	template: `
    	<div class="jumbotron text-center">
      		<h1>The App Lives!</h1>
      		<p>{{ message }}</p>
    	</div>
			<router-outlet></router-outlet>`
})
export class AppComponent {
  message = 'This is the app component.';

import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { ContactComponent } from   './contact/contact.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { HelpComponent } from './help/help.component';
import { HomeComponent } from './home/home.component';
import { LoginComponent } from './login/login.component';
import { NavigationTopComponent } from './navigation/navigation-top.component';


const appRoutes: Routes = [
    { path: '', component: LoginComponent },
    { path: 'navtop', component: NavigationTopComponent },
    { path: 'home', component: HomeComponent },
    { path: 'dashboard', component: DashboardComponent },
    { path: 'contact', component: ContactComponent },
    { path: 'help', component: HelpComponent },    
    { path: '**', component: HomeComponent }
];

export const appRouting: ModuleWithProviders = RouterModule.forRoot(appRoutes);

import { Component } from '@angular/core';

@Component({
  selector: 'home',
  template: `<h2>Home component</h2>
  
  <div class="jumbotron text-center">
      		<h1>The App Lives!</h1>
      		<p>{{ message }}</p>
    	</div>
      	<nav-top></nav-top>
       `
})

export class HomeComponent {
  message = 'This is the Home component!.';
}

import { Component } from '@angular/core';

@Component({
  selector: 'nav-top',
  template: `<header> 
                <nav class="navbar navbar-inverse"> 
      				<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 }"  >Home</a></li>							 
							<li><a routerLink="/contact" routerLinkActive="active">Contact</a></li>
							<li><a routerLink="/help" routerLinkActive="active">Help</a></li>  
						</ul> 
      				</div> 
     			 </nav> 
    		</header>`
})

export class NavigationTopComponent {
  message = 'Top navigation component!.';
}

import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'login',
  template: `<div class="jumbotron text-center">
              	<h1>The App Lives!</h1>
              	<p>{{ message }}</p>
				  <button (click)="reRerouteButton()"  class="btn btn-success">Test login</button>
    	     </div>`
})

export class LoginComponent {
  message = 'This is the Login component!.';

  	constructor( private _router: Router){}

  reRerouteButton(){
	  this._router.navigate(['/home']);
  }
}

[fretburner]

Hey robin01,

I think possibly what you need to do is import the Router module into your NavigationTopComponent.