我在使用Angular时遇到了一个情况，其中路由数据解析器似乎准备好正确返回数据，但是后续的解析过程从未发生。这尤其奇怪，因为我有另一个组件的并排安排，而那里的功能正常。
应用程序通过HTTP检索有关事件数组的数据。在中，所有事件都由解析器响应/events返回，并且组件正确显示它们。在组件中，在我的当前配置中，我仍然通过HTTP检索所有事件，然后，在响应于/events/[the event ID]的解析器中，选择应显示其详细信息的事件。(这来自Pluralsight Angular基础课程，如果听起来很熟悉。但是我倾向于观看视频，然后按照自己的顺序进行工作，以尝试巩固我在脑海中的技能。)
remote-event.service.ts
import { Injectable, EventEmitter } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { IEvent } from './event.model';
@Injectable()
export class RemoteEventService {
constructor(
private http: HttpClient
) {}
getEvents(): Observable<IEvent[]> {
return this.http.get<IEvent[]>('/api/ngfdata/events.json');
}
getEventById(id: number): Observable<IEvent> {
console.log(`In getEventById: id = ${id}`);
const emitter = new EventEmitter<IEvent>();
this.getEvents().subscribe(
(events) => {
emitter.emit(events.find((event) => event.id === id));
}
);
return emitter;
}
export interface ISessionSearchResult {
eventId: number;
sessionId: number;
sessionName: string;
}
如果我不使用解析器，EventDetails组件就能正常工作。这样做可以： eventRoutes（这是从/events/分支出的子路由）
import { Routes } from '@angular/router';
import { EventListComponent, EventDetailsComponent,
CreateEventComponent, UnsavedNewEventGuard,
EventListResolver, EventDetailResolver
} from './index';
export const eventRoutes: Routes = [
{ path: 'create', component: CreateEventComponent,
canDeactivate: [UnsavedNewEventGuard]
},
{ path: ':id', component: EventDetailsComponent/*,
resolve: { event: EventDetailResolver }*/
},
{ path: '', component: EventListComponent,
resolve: { events: EventListResolver }
}
];
event-details.component.ts
import { Component, Input, OnInit, inject, Inject } from '@angular/core';
import { RemoteEventService } from '../shared/remote-event.service';
import { ActivatedRoute, Params } from '@angular/router';
import { IEvent } from '../shared/event.model';
import { TOASTR_TOKEN } from 'src/app/common/3rd-party/toastr.service';
@Component(
{
selector: 'event-detail',
templateUrl: './event-details.component.html',
styles: [`
.container { padding-left: 20px; padding-right: 20px; }
.event-image { height: 100px; }
.btn-group:first-child {
margin-right: 24px;
}
.btn-group {
border: medium solid green;
}
.btn-group .btn:not(:first-child) {
border-left: thin solid green;
}
`]
}
)
export class EventDetailsComponent implements OnInit {
event: IEvent;
filterBy = 'all';
sortBy = 'name';
constructor(
private eventService: RemoteEventService,
private route: ActivatedRoute,
@Inject(TOASTR_TOKEN) private toast
) {
console.log('In EventDetailsComponent.constructor');
}
/* ngOnInit() {
console.log('At start of EventDetailsComponent.ngOnInit');
this.event = this.route.snapshot.data['event'];
console.log('At end of EventDetailsComponent.ngOnInit');
}
*/
ngOnInit() {
console.log('At start of EventDetailsComponent.ngOnInit');
this.route.params.forEach((params: Params) => {
this.eventService.getEventById(+params.id).subscribe(
(event) => this.event = event
);
});
console.log('At end of EventDetailsComponent.ngOnInit');
}
flashSessionSummary(message: string) {
this.toast.info(message);
}
}
我已启用路由跟踪。不使用解析器：
这是解析器：
event-detail-resolver.service.ts
import { Injectable, Input } from '@angular/core';
import { RemoteEventService } from '../shared/remote-event.service';
import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
import { IEvent } from '../shared/event.model';
@Injectable()
export class EventDetailResolver implements Resolve<IEvent> {
constructor(
private eventService: RemoteEventService
) {}
resolve(route: ActivatedRouteSnapshot) {
console.log(`In resolve(): id = ${route.params.id}`);
const e = this.eventService.getEventById(+route.params.id);
console.log(`The observable that resolve() is about to return: ${JSON.stringify(e)}`);
e.subscribe((evt) => console.log(`The value that the observable resolves to: ${JSON.stringify(evt)}`));
return e;
}
}
正如您所见，在返回Observable之前，我订阅了它，以便我可以在解析器中演示它将解析为的值--它是正确的事件对象值。如果您说在这里订阅它会阻止解析器解析，那么不，我是在调试目的之后添加的 ，它已经无法工作。当我将其注释掉时，我得到完全相同的结果（除了不执行console.log调用）：解析器从未解析。
这很奇怪，因为我的Observable上的显式订阅表明它将产生正确的值。
确认这从未超过分辨率，请注意组件构造函数中的console.log语句从未执行，因为在运行请求通过解析器之前。
有什么想法吗？
function foo() { let bar; new Promise(resolve => resolve(true)).then(result => bar = result); return bar; }。在这个例子中，then()执行之前bar就会被返回。这与getEventById()中正在发生的情况非常相似。是的，pipe()和操作符可能具有复杂的返回类型和消息，但 EventEmitter 简单地不应该在@Injectable()中。 - Alexander StaroselskygetEventById(id: number): Observable<IEvent> { return this.getEvents().pipe(map(events => events.find((event) => event.id === id))}。请将此代码翻译为中文。 - Alexander Staroselsky