我正在尝试创建一个简单的解析器,以返回用户信息。但是,在我的应用程序中,我需要使用自己的类来包装http组件,以便返回可观察的Subject。第一个用户链接时,我的解析器按预期工作,但在UserProfileComponent中点击任何用户链接后,解析器不会第二次完成。
我可以看到浏览器URL随着新ID而改变,并且UserResolve中的console.log被打印出来,但什么也没有发生。
我的路由器:
请注意,我的API服务器返回一个带有"data"属性的JSON结构,因此使用
除了第一次导航之外,在这个组件中
我可以看到浏览器URL随着新ID而改变,并且UserResolve中的console.log被打印出来,但什么也没有发生。
我的路由器:
import { Routes, RouterModule } from '@angular/router';
import { DashboardComponent } from './dashboard/dashboard.component';
import { UserProfileComponent } from './user-profile/user-profile.component';
import { LoginComponent } from './login/login.component';
import { AuthGuard } from './_resolve/guard.auth';
import { UserResolve } from './_resolve/user.resolve';
const appRoutes: Routes = [
{ path: '', component: DashboardComponent, canActivate: [AuthGuard] },
{ path: 'user/:id', component: UserProfileComponent, canActivate: [AuthGuard], resolve: { user: UserResolve } },
{ path: 'login', component: LoginComponent },
// otherwise redirect to home
{ path: '**', redirectTo: '' }
];
export const Routing = RouterModule.forRoot(appRoutes);
UserResolve:
import { Injectable } from '@angular/core';
import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
import { ApiService } from '../_services/api.service';
import { Observable } from 'rxjs';
import { User } from '../_models/user';
@Injectable()
export class UserResolve implements Resolve<User> {
constructor(private apiService:ApiService) {}
resolve(route: ActivatedRouteSnapshot):Observable<User> {
console.log('getting user ' + route.params['id'] + ' with resolver');
return this.apiService.getUser(route.params['id']).first();
}
}
ApiService:
import { Injectable } from '@angular/core';
import { Http, Headers, Response, RequestOptions } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/Rx';
import { RefreshHttpClient } from '../_injectables/refresh-http-client';
import { User } from '../_models/user';
@Injectable()
export class ApiService {
constructor(private rfhttp:RefreshHttpClient) { }
getUser(userId):Observable<User> {
return this.rfhttp.get('/api/user?userId=' + userId);
}
}
并刷新HttpClient的“get”方法:
...
get(url):Observable<any> {
var sub = new Subject<any>();
var obs = this.http.get(url, {
headers: this.createAuthorizationHeaders()
})
.map(res => res.json())
.subscribe(
data => {
return sub.next(data);
},
error => {
if (error.status == 401 || error.status == 403) {
this.refreshAndRetry(() => {
this.http.get(url, {
headers: this.createAuthorizationHeaders()
})
.map(res => res.json())
.subscribe(
data => {
return sub.next(data);
},
error => {
console.error(error);
return null;
});
});
} else {
console.error(error);
return null;
}
}
);
return sub.asObservable();
}
...
编辑:添加UserProfileComponent:
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { User } from '../_models/user';
@Component({
selector: 'app-user-profile',
templateUrl: './user-profile.component.html',
styleUrls: ['./user-profile.component.scss']
})
export class UserProfileComponent implements OnInit {
abstract:Boolean;
user:User;
constructor(
private route:ActivatedRoute
) { }
ngOnInit() {
this.user = this.route.snapshot.data['user']['data'];
console.log(this.user);
...
请注意,我的API服务器返回一个带有"data"属性的JSON结构,因此使用
['data']
。除了第一次导航之外,在这个组件中
ngOnInit
不会被调用,这让我认为Resolver Observable从未完成。
sub.next(data)
)。似乎我的 Resolve 没有收到 Observable 完成的信号。 - alreit.next()
。请参阅https://angular.io/docs/ts/latest/api/router/index/Resolve-interface.html。 - Sebasnext()
(或take(1)
),第一个导航也永远不会解析。 - alreit