Resove守卫

product TS

import { Component, OnInit } from '@angular/core'; import {ActivatedRoute, Params, RouterLinkActive} from '@angular/router'; @Component({ selector: 'app-product', templateUrl: './product.component.html', styleUrls: ['./product.component.css'] }) export class ProductComponent implements OnInit { public productId: number; public productName: string; constructor(private routerInfo: ActivatedRoute) { } ngOnInit(): void { this.routerInfo.params.subscribe((params: Params) => this.productId = params.id); this.routerInfo.data.subscribe((data: {product: Product}) => { this.productId = data.product.id; this.productName = data.product.name; }); // this.productId = this.routerInfo.snapshot.params["id"]; } } export class Product { // tslint:disable-next-line:typedef constructor(public id: number,public name: string){ } }

2.product.resoved.ts

import {ActivatedRouteSnapshot, Resolve, Router, RouterStateSnapshot} from '@angular/router'; import {Observable} from 'rxjs'; import {Product, ProductComponent} from '../product/product.component'; import {Injectable, Injector} from '@angular/core'; // @ts-ignore @Injectable() export class ProductResoved implements Resolve<Product> { constructor(private router: Router) { } // tslint:disable-next-line:max-line-length resolve(route: ActivatedRouteSnapshot){ // const productId: number = route.params.id; let productId: number = route.params["id"]; if (productId == 2){ return new Product(productId, "iPhone8 Plus"); }else{ this.router.navigate(['/home']); return undefined; } } }

3.app-routing

const routes: Routes = [ {path: '', redirectTo: '/home', pathMatch: 'full'}, {path: 'home', component: HomeComponent}, {path: 'chat', component: ChatComponent, outlet: 'talkroom'}, {path: 'product/:id', component: ProductComponent, children: [ {path: '', component: ProductDescComponent}, {path: 'sellerID/:id', component: SellerInfoComponent} ], resolve: { product: ProductResoved } }, {path: '**', component: Code404Component}, ];

4.product HTML

<div class="product"> <p>这里是商品信息组件!</p> <p>商品ID是{{productId}}</p> <p>商品名称是 {{productName}}</p> <a [routerLink]="['./']">商品描述 </a> <a [routerLink]="['./sellerID',9]">销售员信息</a> <router-outlet></router-outlet> </div>