The Angular router is an external, optional Angular NgModule called RouterModule. The router is a combination of multiple provided services (RouterModule), multiple directives (RouterOutlet, RouterLink, RouterLinkActive), and a configuration (Routes). You'll configure the routes first.
<base href>
Open index.html and ensure there is a <base href="..."> element (or a script that dynamically sets this element) at the top of the <head> section.
<router-outlet>
you can add a <router-outlet> element at the end of the template. RouterOutlet is one of the directives provided by the RouterModule. The router displays each component immediately below the <router-outlet> as users navigate through the app
1. src/index.html
<head>
<base href="/">
2. app.routing.ts
import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
/*All Router Component import here*/
import { LoginComponent } from '../Components/Dashboard/login.component';
const appRoutes: Routes = [
{ path: '/login', component: LoginComponent },
{ path: '', redirectTo: '/home', pathMatch: 'full'},
{ path: 'detail/:id', component: DetailComponent},
];
export const masterrouting: ModuleWithProviders = RouterModule.forRoot(appRoutes);
==============================================================
3. app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HttpModule } from '@angular/http';
import { masterrouting } from '../app.routing';
import {MasterComponent} from '../app.master.component';
import { LoginComponent } from '../app.login.component';
@NgModule({
declarations: [MasterComponent,LoginComponent],
imports: [BrowserModule,masterrouting,HttpModule,CommonModule],
providers: [],
bootstrap: [MasterComponent]
})
export class MasterModule { }
==============================================================
4.app.MasterComponent
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: '<router-outlet></router-outlet>',
})
export class MasterComponent {}
5. app.LoginComponent
import { Component,OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { ActivatedRoute, ParamMap } from '@angular/router';
import { Location } from '@angular/common';
import 'rxjs/add/operator/switchMap';
@Component({
templateUrl: '../Login.component.html',
})
export class LoginComponent implements OnInit {
constructor(public _router:Router, private _location: Location){}
ngOnInit(): void {
this.route.paramMap
.switchMap((params: ParamMap) => this.heroService.getHero(+params.get('id')))
.subscribe(hero => this.hero = hero);
}
change( id):number
{
this._router.navigate(['/detail', id]);
}
"Note:=> users can click one of the two links in the AppComponent or click the browser's back button. Now add a third option, a goBack() method that navigates backward one step in the browser's history stack using the Location service you injected previously."
goBack(): void {
this._location.back();
}
===============================================================
6. login.compoment.html
<div>
<!-- -Css->
<style>
.active{color:blue;font-weight:bold;}
</style>
<ui>
<li> <a routerLink="/home" routerLinkActive="active"> </li>
<li> <a routerLink="/detail/"+Id+"" routerLinkActive="active"> </li>
<li> <button (click)="change(id)"/>Submit </li>
<li> <button (click)="goBack()"/>Submit </li>
</ui>
<div>
<a *ngFor="let hero of heroes" [routerLink]="['/detail', hero.id]" class="col-1-4">
</div>
</div>
No comments:
Post a Comment