resolve守卫 点击不起作用 不报错

Question

// app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { StockComponent } from './stock/stock.component';
import { Code404Component } from './code404/code404.component';
import { BuyerListComponent } from './buyer-list/buyer-list.component';
import { SellerListComponent } from './seller-list/seller-list.component';
import { ConsultComponent } from './consult/consult.component';
import { PermissionGuard } from './guard/permission.guard';
import { FocusGuard } from './guard/focus.guard';
import { StockResolve } from './guard/stock.resolve';


@NgModule({
declarations: [
AppComponent,
HomeComponent,
StockComponent,
Code404Component,
BuyerListComponent,
SellerListComponent,
ConsultComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [PermissionGuard, FocusGuard, StockResolve],
bootstrap: [AppComponent]
})
export class AppModule { }

// app-touting.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { StockComponent } from './stock/stock.component';
import { Code404Component } from './code404/code404.component';
import { BuyerListComponent } from './buyer-list/buyer-list.component';
import { SellerListComponent } from './seller-list/seller-list.component';
import { ConsultComponent } from './consult/consult.component';
import { PermissionGuard } from './guard/permission.guard';
import { FocusGuard } from './guard/focus.guard';
import { StockResolve } from './guard/stock.resolve';

const routes: Routes = [
{ path: '', redirectTo: '/home', pathMatch: 'full' },
{ path: 'home', component: HomeComponent },
{ path: 'consult', component: ConsultComponent, outlet: 'aux' },
{
path: 'stock/:id', component: StockComponent, data: [{ isPro: true }],
children: [
{ path: '', component: BuyerListComponent },
{ path: 'buyer', component: BuyerListComponent },
{ path: 'seller/:id', component: SellerListComponent },
],
// canActivate: [PermissionGuard],
// canDeactivate: [FocusGuard]
resolve: {
stock: StockResolve
}
},
{ path: '**', component: Code404Component },
];

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

// stock.resolve.ts

import { Resolve, Router } from '@angular/router';
import { ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router/src/router_state';
import { Observable } from 'rxjs/Observable';
// import { Promise } from 'q';
import { Stock } from '../stock/stock.component';
import { Injectable } from '@angular/core';

@Injectable()
export class StockResolve implements Resolve<Stock> {

constructor(private router: Router) {

}

resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Stock | Observable<Stock> | Promise<Stock> {
const id = route.params['id'];

if (id === 1) {
return new Stock(2, 'IBM');
} else {
this.router.navigate(['/home']);
return undefined;
}
}
}

// stock.component.ts

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


@Component({
selector: 'app-stock',
templateUrl: './stock.component.html',
styleUrls: ['./stock.component.css']
})
export class StockComponent implements OnInit {

private stock: Stock;

private isPro: boolean;

private foucs = false;

constructor(private routeInfo: ActivatedRoute) { }

ngOnInit() {
this.routeInfo.data.subscribe((data: { stock: Stock }) => {
this.stock = data.stock;
});
// this.routeInfo.params.subscribe((params: Params) => this.stockId = params['id']);
this.isPro = this.routeInfo.snapshot.data[0]['isPro'];
// this.stockId = this.routeInfo.snapshot.params['id'];
}

isFocus() {
return this.foucs;
}

}


export class Stock {
constructor(public id: number, public name: string) { }
}

Answer 1

慕粉4125737 2018-08-12 11:42:25

这个问题我在本地也遇到的

错误的原因是StockResolve里的if语句

if (id === 1) 

并没有如预想的走到这个分支里面，而是走到了else分支。

我猜你应该也是和我一样，一开始写id==1， 但是ide的代码提示建议改成===,所以就没走进去。

Answer 2

JoJo 2017-11-20 16:09:59

报什么错？把错误信息贴一下。

• 提问者 Chiang_ #1

  不抱错，点击详情页没反应