Angular4 路由:ResolveStart 事件永远不会结束
Angular4 Routing: ResolveStart event never ends
我有一个 Angular 4 应用程序,它使用来自自定义 <base href="/long/required/path/index.html">
的哈希路由。这样做是因为要求声明此 url 必须是项目的根目录。我正在尝试使用哈希路由来解决这个问题。
我看到的问题涉及解析给定路由的数据。给定一个 url localhost:8000/long/require/path/index.html#/project/1/document/55
和app.routes.ts
export const ROUTES: Routes = [
{
path: 'project/:projectId/document/:documentId',
component: DocumentViewerComponent,
resolve: { document: DataResolver}
},
{ path: '**', component: NoContentComponent }
];
此处的解析器按预期运行并检索数据。
@Injectable()
export class DataResolver implements Resolve<Document> {
constructor(
private docService: DocumentService,
) { }
public resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Document> {
this.docService.getDocument(route.params.workspaceId,route.params.documentId)
.subscribe(d => {
console.log('Document received, waiting for components to load?', d);
this.docService.documentRecieved(d);
}
);
return this.docService.recievedDocument$;
}
}
文档服务[=22=]
@Injectable()
export class DocumentService {
private recievedDocumentSource = new Subject<Document>();
recievedDocument$ = this.recievedDocumentSource.asObservable();
documentRecieved(document: Document) {
this.recievedDocumentSource.next(document);
}
}
这里的目的是其他组件可以订阅recievedDocument$
并获取新的文档信息。这目前有效,其他组件通过订阅此 Observable
来获取文档。但是,<router-outlet>
从未呈现我的主要组件,并且在检查了一些 ActivatedRoute
快照后,路由器进入 ResolveStart
路由器事件但从未到达 ResolveEnd
事件。
1) 方法合理吗?这有意义吗?
2) 知道为什么我会挂在这个 ResolveStart 状态吗?
免责声明:代码已被简化,所以我更关注概念上的缺陷而不是语法上的缺陷
ResolveEnd 没有被触发,因为 Observable 没有完成。因此,尝试在下一次调用后立即完成 Observable。应该发出丢失的事件。
在内部,Angular 使用 concatMap 运算符,在通知观察者之前等待完成。
我有一个 Angular 4 应用程序,它使用来自自定义 <base href="/long/required/path/index.html">
的哈希路由。这样做是因为要求声明此 url 必须是项目的根目录。我正在尝试使用哈希路由来解决这个问题。
我看到的问题涉及解析给定路由的数据。给定一个 url localhost:8000/long/require/path/index.html#/project/1/document/55
和app.routes.ts
export const ROUTES: Routes = [
{
path: 'project/:projectId/document/:documentId',
component: DocumentViewerComponent,
resolve: { document: DataResolver}
},
{ path: '**', component: NoContentComponent }
];
此处的解析器按预期运行并检索数据。
@Injectable()
export class DataResolver implements Resolve<Document> {
constructor(
private docService: DocumentService,
) { }
public resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Document> {
this.docService.getDocument(route.params.workspaceId,route.params.documentId)
.subscribe(d => {
console.log('Document received, waiting for components to load?', d);
this.docService.documentRecieved(d);
}
);
return this.docService.recievedDocument$;
}
}
文档服务[=22=]
@Injectable()
export class DocumentService {
private recievedDocumentSource = new Subject<Document>();
recievedDocument$ = this.recievedDocumentSource.asObservable();
documentRecieved(document: Document) {
this.recievedDocumentSource.next(document);
}
}
这里的目的是其他组件可以订阅recievedDocument$
并获取新的文档信息。这目前有效,其他组件通过订阅此 Observable
来获取文档。但是,<router-outlet>
从未呈现我的主要组件,并且在检查了一些 ActivatedRoute
快照后,路由器进入 ResolveStart
路由器事件但从未到达 ResolveEnd
事件。
1) 方法合理吗?这有意义吗?
2) 知道为什么我会挂在这个 ResolveStart 状态吗?
免责声明:代码已被简化,所以我更关注概念上的缺陷而不是语法上的缺陷
ResolveEnd 没有被触发,因为 Observable 没有完成。因此,尝试在下一次调用后立即完成 Observable。应该发出丢失的事件。
在内部,Angular 使用 concatMap 运算符,在通知观察者之前等待完成。