hello,
Working on a application, when a user successfully logs in it redirects the
user to a home component which has the navigation component(menu). for
testing purpose I have a button to redirect to the home.component.
problem, every time i click one of the menu options the menu disappears and
it displays the content back into the original router-outlet
(app.component.).
I tried placing a router-outlet under the navigation menu but it didnt work.
how do i get it to display the navigation click keeping the navigation bar
and displaying the links with in the current component.
any help you can provide would be greatly appreciated.
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']);
}
}
--
You received this message because you are subscribed to the Google Groups
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
