Angular路由

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

 import { AComponent } from '../../components/a/a.component';
 import { BComponent } from '../../components/b/b.component';

 // an array of soon-to-be routes!
 const routes: Routes = [];

 @NgModule({
  imports: [ RouterModule.forRoot(routes) ],
  exports: [ RouterModule ]
 })
 export class AppRoutingModule { }

@NgModule({
  // … lots of metadata ...
 })
 export class RouterModule {
  forRoot(routes: Routes) {
    // … configuration for eagerly loaded routes …
  }

  forChild(routes: Routes) {
    // … configuration for lazily loaded routes …
  }
 }

import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';

 import { AppComponent } from './app.component';
 import { AComponent } from './components/a/a.component';
 import { BComponent } from './components/b/b.component';
 import { AppRoutingModule } from './modules/app-routing/app-routing.module';

 @NgModule({
  declarations: [
    AppComponent,
    AComponent,
    BComponent
  ],
  imports: [
    AppRoutingModule, // routing feature module
    BrowserModule
  ],
  providers: [],
  bootstrap: [ AppComponent ]
 })
 export class AppModule { }

<!-- app.component.html -->

 <ul>
  <!-- routerLink(s) here -->
 </ul>
 <router-outlet></router-outlet>
 <!-- routed content appends here (AFTER THE ELEMENT, NOT IN IT!) -->

// … same imports from before …

 const routes: Routes = [
  {
    path: 'A',
    component: AComponent
  },
  {
    path: 'B',
    component: BComponent
  }
 ];

 @NgModule({
  imports: [ RouterModule.forRoot(routes) ],
  exports: [ RouterModule ]
 })
 export class AppRoutingModule { }

/* global styles.css */

 ul li {
  cursor: pointer;
  display: inline-block;
  padding: 20px;
  margin: 5px;
  background-color: whitesmoke;
  border-radius: 5px;
  border: 1px solid black;
 }

 ul li:hover {
  background-color: lightgrey;
 }

<!-- app.component.html -->

 <ul>
  <li routerLink="/A">Go to A!</li>
  <li routerLink="/B">Go to B!</li>
 </ul>
 <router-outlet></router-outlet>

// … PageNotFoundComponent imported along with everything else …

 const routes: Routes = [
  {
    path: 'A',
    component: AComponent
  },
  {
    path: 'B',
    component: BComponent
  },
  {
    path: '',
    redirectTo: 'A',
    pathMatch: 'full'
  },
  {
    path: '**',
    component: PageNotFoundComponent
  }
 ];

<!-- app.component.html -->

 <ul>
  <li routerLink="/A" routerLinkActive="active">Go to A!</li>
  <li routerLink="/B" routerLinkActive="active">Go to B!</li>
 </ul>
 <router-outlet></router-outlet>

/* global styles.css */

 .active {
  background-color: lightgrey !important;
 }

const routes: Routes = [
  // … other routes …
  {
    path: 'B',
    component: BComponent
  },
  {
    path: 'B/:parameter',
    component: BComponent
  },
  // … other routes …
 ];

// app.component.ts

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

 @Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
 })
 export class AppComponent {
  constructor(private router: Router) { }

  routeMatrixParam(value: string) {
    if (value)
      this.router.navigate(['B', { parameter: value }]); // matrix parameter
    else
      this.router.navigate(['B']);
  }

  routeAddressParam(value: string) {
    this.router.navigate(['B', value]);
  }
 }

// app.component.html

 <ul>
  <li routerLink="/A">Go to A!</li>
  <li>
    <input #matrixInput>
    <button (click)="routeMatrixParam(matrixInput.value)">Matrix!</button>
  </li>
  <li>
    <input #paramInput>
    <button (click)="routeAddressParam(paramInput.value)">Param!</button>
  </li>
 </ul>
 <router-outlet></router-outlet>

// b.component.ts

 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, ParamMap } from '@angular/router';

 @Component({
  selector: 'app-b',
  template: `
  <p>Route param: {{ currParam }}</p>
  `
 })
 export class BComponent implements OnInit {
  currParam: string = "";

  constructor(private route: ActivatedRoute) { }

  ngOnInit() {
    this.route.params.subscribe((param: ParamMap) => {
      this.currParam = param['parameter'];
    });
  }
 }

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

 import { NestComponent } from '../../components/nest/nest.component';
 import { AComponent } from '../../components/nest/a/a.component';
 import { BComponent } from '../../components/nest/b/b.component';

 const routes: Routes = [
  {
    path: 'nest',
    component: NestComponent,
    children: [
      { path: 'A', component: AComponent },
      { path: 'B', component: BComponent }
    ]
  }
 ];

 @NgModule({
  imports: [ RouterModule.forRoot(routes) ],
  exports: [ RouterModule ]
 })
 export class AppRoutingModule { }

// nest.component.ts

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

 @Component({
  selector: 'app-nest',
  template: `
  <ul>
    <li routerLink="./A">Go to A!</li>
    <li routerLink="./B">Go to B!</li>
  </ul>
  <router-outlet></router-outlet>
  `
 })
 export class NestComponent { }

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

 @Component({
  selector: 'app-root',
  template: `
  <ul>
    <li routerLink="/nest">Go to nested routes!</li>
    <li routerLink="/">Back out of the nested routes!</li>
  </ul>
  <router-outlet></router-outlet>
  `
 })
 export class AppComponent { }

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

 @Component({
  selector: 'app-a',
  template: `
  <p>a works!</p>
  `
 })
 export class AComponent { }

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

 @Component({
  selector: 'app-b',
  template: `
  <p>b works!</p>
  `
 })
 export class BComponent { }

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

 import { AuthService } from '../../services/auth.service';
 import { UserService } from '../../services/user.service';

 import { PrivateNestComponent } from '../../components/private-nest/private-nest.component';
 import { PrivateAComponent } from '../../components/private-nest/private-a/private-a.component';
 import { PrivateBComponent } from '../../components/private-nest/private-b/private-b.component';

 const routes: Routes = [
  {
    path: 'private-nest',
    component: PrivateNestComponent,
    canActivate: [ AuthService ], // !!!
    canActivateChild: [ AuthService ], // !!!
    canDeactivate: [ AuthService ], // !!!
    children: [
      { path: 'private-A', component: PrivateAComponent },
      { path: 'private-B', component: PrivateBComponent }
    ]
  }
 ];

 @NgModule({
  imports: [ RouterModule.forRoot(routes) ],
  exports: [ RouterModule ],
  providers: [
    AuthService,
    UserService
  ]
 })
 export class AppRoutingModule { }

// user.service.ts

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

 class TheUser {
  constructor(public isLoggedIn: boolean = false) { }

  toggleLogin() {
    this.isLoggedIn = true;
  }

  toggleLogout() {
    this.isLoggedIn = false;
  }
 }

 const globalUser = new TheUser();

 @Injectable({
  providedIn: 'root'
 })
 export class UserService {
  theUser: TheUser = globalUser;

  constructor(private router: Router) { }

  get isLoggedIn() {
    return this.theUser.isLoggedIn;
  }

  login() {
    this.theUser.toggleLogin();
  }

  logout() {
    this.theUser.toggleLogout();
    this.router.navigate(['/']);
  }
 }

import { Component, Injectable } from '@angular/core';
 import { CanActivate, CanActivateChild, CanDeactivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';

 import { UserService } from './user.service';

 @Injectable({
  providedIn: 'root'
 })
 export class AuthService implements CanActivate, CanActivateChild, CanDeactivate<Component> {
  constructor(private user: UserService) {}

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    if (this.user.isLoggedIn)
      return true;
    else
      return false;
  }

  canActivateChild(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    return this.canActivate(route, state);
  }

  canDeactivate(component: Component, route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    if (!this.user.isLoggedIn || window.confirm('Leave the nest?'))
      return true;
    else
      return false;
  }
 }

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

 import { UserService } from './services/user.service';

 @Component({
  selector: 'app-root',
  template: `
  <ul>
    <li routerLink="/private-nest">Enter the secret nest!</li>
    <li routerLink="/">Leave the secret nest!</li>
    <li *ngIf="user.isLoggedIn"><button (click)="user.logout()">LOGOUT</button></li>
    <li *ngIf="!user.isLoggedIn"><button (click)="user.login()">LOGIN</button></li>
  </ul>
  <router-outlet></router-outlet>
  `
 })
 export class AppComponent {
  constructor(private user: UserService) { }
 }