我有一个延迟加载模块,其中声明了所有组件并在
RouterModule.forChild()
中添加了路由
但其中一些路由有其解析器,可以预取一些数据并且调用服务来更改父组件标头中的某些内容 像下面这样:
//Imports...
@Injectable({
providedIn: 'root',
})
export class MyVendorHeaderResolver implements Resolve<Header> {
constructor(private vendorHeaderService: VendorHeaderService) {}
resolve(
route: ActivatedRouteSnapshot,
state: RouterStateSnapshot
): Observable<Header> {
const title: string = 'MainNav.NavMenu.Vendors.Action.MyVendor';
const breadcrumbs: Breadcrumb[] = [
{ displayText: 'MainNav.NavMenu.Vendors.Title', link: '..' },
{
displayText: 'MainNav.NavMenu.Vendors.Action.MyVendor',
link: route.routeConfig.path,
},
];
//this change the header of the main page component if
this.vendorHeaderService.changeHeader({ title, breadcrumbs } as Header);
// if the pervious line works with the same instance of the service provided in module,
// i'd not need to return anything form this resolver
return of({ title, breadcrumbs } as Header);
}
}
所以这个
VendorHeaderService
:
//imports
@Injectable({
providedIn: 'root',
})
export class VendorHeaderService {
private header$ = new Subject<Header>();
constructor() {}
headerChange(): Subject<Header> {
return this.header$;
}
changeHeader(header: Header) {
this.header$.next(header);
}
}
我希望它只在我的延迟加载模块中提供,但我不能让它在解析器中使用。
所以我的问题:
是否可以使解析器服务实例与模块组件中使用的解析器服务实例相同,而不用此方法将服务暴露到外部
provideIn: 'root'
?
我已经在“根”环境注入器中提供了所有服务,并且工作正常, 但该服务暴露在应用程序中的任何地方
如果您在延迟加载的功能模块中而不是在根级别同时提供
VendorHeaderService
和 MyVendorHeaderResolver
,则服务和解析器将无法在整个应用程序中使用,它们只能在该特定功能模块中访问。
然后,在解析器中,如果您通过构造函数获取服务实例,则将使用该服务的同一实例。
如果您使用 Angular 版本 14 或更高版本,另一种方法可以是注入相同的服务实例而不使用构造函数,如下所示:
@Injectable()
export class MyVendorHeaderResolver implements Resolve<Header> {
private vendorHeaderService = inject(VendorHeaderService);
// ...
}