简体   繁体   English

角度6:无法从路由解析器获取数据

[英]Angular 6: Cannot get data from route resolver

I have a route configuration which allows a user to view the recent activities that has been done based on a criteria like so : 我有一个路由配置,该路由配置允许用户根据类似这样的条件查看最近进行的活动:

{ path: 'workspace', component: WorkspaceComponent, children: [
{ path: 'upload', component: UploadComponent },
{ path: 'verify', component: VerifyComponent, resolve:{dataObject: RecentActivityResolver}}]}

The resolver returns a object from an arraylist stored in a service class. 解析程序从存储在服务类中的数组列表中返回一个对象。 I am not directly accessing the service class in my VerifyComponent since I intend to change from arrays to HTTP requests soon. 我没有直接访问VerifyComponent中的服务类,因为我打算很快从数组更改为HTTP请求。

@Injectable()
export class RecentActivityResolver implements Resolve<RecentActivityModel>{
constructor(private recentActivity: RecentActivityService){}
resolve(activatedRoute: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<RecentActivityModel> |
Promise<RecentActivityModel> | RecentActivityModel {
    console.log(activatedRoute.queryParams['id']); // gives me the correct result here
    return this.recentActivity.recentActivities[+activatedRoute.queryParams['id']];
    }
}

On my child component I fetch the details from the data observable like so : 在子组件上,我从可观察的数据中获取详细信息,如下所示:

ngOnInit(){
    this.activatedRoute.data.subscribe((data: Data) => {
        console.log(data['dataObject']); // undefined
        this.displayActivity = data['dataObject'];
    });
    this.activatedRoute.queryParams.subscribe((data: Data) =>{
        console.log(data['id']); // correct data here
    });
}

I am not able to understand why the data is not coming here. 我无法理解为什么数据没有到达这里。 Can anyone guide me? 谁能指导我? Thanks in advance. 提前致谢。

Oddly enough the solution/work around was to move the resolver to the parent. 奇怪的是,解决方案/解决方法是将解析器移至父级。 But I really want to know why that is. 但是我真的很想知道为什么。

{ path: 'workspace', component: WorkspaceComponent, resolve:{dataObject: RecentActivityResolver}, children: [
{ path: 'upload', component: UploadComponent },
{ path: 'verify', component: VerifyComponent }
]}

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM