在Angular 8中,可以通过以下方法解决ActivatedRoute#data上奇怪值的问题:
在父级路由解析器中,可以使用mergeMap操作符将父级解析器的数据与子级路由的数据进行合并,确保子级数据不会被覆盖。例如:
import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
import { Observable, of } from 'rxjs';
import { mergeMap } from 'rxjs/operators';
@Injectable()
export class ParentResolver implements Resolve {
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable {
// 父级解析器中的数据
const parentData = { foo: 'parent data' };
// 返回一个Observable,将父级数据与子级数据合并
return of(parentData).pipe(
mergeMap(data => {
// 将父级数据与子级数据合并
const mergedData = { ...data, ...route.data };
// 返回合并后的数据
return of(mergedData);
})
);
}
}
在子级路由组件中,可以使用ActivatedRoute#data中的解决方法,确保子级数据不会被覆盖。例如:
import { Component } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-child',
template: `
Child Component
{{ dataFromParent }}
{{ dataFromChild }}
`
})
export class ChildComponent {
dataFromParent: any;
dataFromChild: any;
constructor(private route: ActivatedRoute) {
// 从父级路由中获取数据
this.dataFromParent = this.route.parent.snapshot.data;
// 从子级路由中获取数据
this.dataFromChild = this.route.snapshot.data;
}
}
通过以上方法,可以解决Angular 8中ActivatedRoute#data上奇怪值的问题,并确保子级数据不会被父级数据覆盖。