angular 6 学习六： routing

在本例中，创建了三个模块：

    LoginComponent,     AdminusersComponent,     AdmintrainersComponent

1. 在模块中引入router

src/app/app.module.ts (import)

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

2. 在模块中定义路径

import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { ReactiveFormsModule }    from '@angular/forms'; import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';import { RouterModule, Routes } from '@angular/router';

import { AppComponent } from './app.component'; import { LoginComponent } from './login/login.component'; import { AdminusersComponent } from './adminusers/adminusers.component'; import { AdmintrainersComponent } from './admintrainers/admintrainers.component';

@NgModule({   declarations: [     AppComponent,     LoginComponent,     AdminusersComponent,     AdmintrainersComponent   ],   imports: [     BrowserModule,     ReactiveFormsModule,     HttpClientModule,     RouterModule.forRoot([       { path: 'userlogin', component: LoginComponent },       { path: 'userlist', component: AdminusersComponent },       { path: 'trainerlist', component: AdmintrainersComponent }       ])          ],   providers: [],   bootstrap: [AppComponent] }) export class AppModule { }

3. 在app.component.html 定义路由标签Router outlet

<router-outlet></router-outlet>

4. 定义路由app.component.html

<button   class="btn btn-primary" (click)="login('usky','123456')">Login</button> <button   class="btn btn-primary" routerLink="/userlist">simple to userlist</button> <button   class="btn btn-primary" routerLink="/trainerlist">simple to trainerlist</button>

<a routerLink="/userlist" routerLinkActive="active" (click)="sayHello('user')">userlist</a> <a routerLink="/trainerlist" routerLinkActive="active" (click)="sayHello('trainer')">trainerlist</a>   <router-outlet></router-outlet>

5. 定义事件链接app.component.ts

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

@Component({   selector: 'app-root',   templateUrl: './app.component.html',   styleUrls: ['./app.component.css'] }) export class AppComponent {   title = 'simpleprj';     constructor(private router: Router) { }

  sayHello(target){         alert("hello "+target);   }   login(loginId, loginPwd){       this.router.navigateByUrl("userlogin");   }   gototrainer(){       this.router.navigateByUrl("trainerlist");   } }