Angular4 路由 : ResolveStart event never ends

标签 angular angular2-routing

我有一个使用来自自定义 <base href="/long/required/path/index.html"> 的哈希路由的 Angular 4 应用程序.这样做是因为要求声明此 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$;
 }
}

文档服务

@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 运算符,它在通知观察者之前等待完成。

关于Angular4 路由 : ResolveStart event never ends,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46673202/

相关文章:

angular - 如何手动触发更改事件 - angular2

Angular2 RC1 实现加载指示器的最佳方法

angular2-routing - Angular 4路由不起作用

javascript - Angular 2 子路由

带有组件数组的 Angular 绑定(bind)对象,以使用 ngModels 查看

unit-testing - 如何对 material2 图标进行单元测试

node.js - Angular2 TypeScript - 错误 TS2307 : Cannot find module 'angular2/forms'

Angular 4/Ionic 3 - 使用 Protractor 创建模拟服务

包含点 '.' 的 angular2 RC1 路由参数

angular - 在 Azure 中使用路由托管 Angular2 应用程序