[英]Angular 13 how to configure manually lazy loaded module
I've tried everything to find a solution online and did research for days now but I'm unable to understand Angulars current concept of lazy loading module / components WITHOUT the router.我已经尽一切努力在网上找到解决方案,并且研究了好几天,但我无法理解 Angulars 目前在没有路由器的情况下延迟加载模块/组件的概念。
My overall scenario:我的总体情况:
In my case my Angular App is only loaded as a part of a bigger page.在我的例子中,我的 Angular 应用程序仅作为更大页面的一部分加载。 I have placeholder distributed on that page like <div id="first-comp-container">
.我在该页面上分配了占位符,例如<div id="first-comp-container">
。 Now when my App is loaded I want to lazy load modules/libraries.现在,当我的应用程序加载时,我想延迟加载模块/库。 Some of the modules need some sort of configuration.一些模块需要某种配置。 Once a module is loaded I want to create a component from that package and render it inside one off the placeholder.加载模块后,我想从该 package 创建一个组件并将其呈现在占位符内。
My dynamic components have inputs and output events.I'll split up my scenario in a few seperate questions.我的动态组件有输入和 output 事件。我将在几个单独的问题中拆分我的场景。
Problem for this question: I know I can lazy load a module in Angular 13 this way without router这个问题的问题:我知道我可以在没有路由器的情况下以这种方式延迟加载 Angular 13 中的模块
const { MappingModule } = await import('@hwrm/mapping');
const mapModuleRef = createNgModuleRef(MappingModule);
But first of how can I pass a provider like a InjectionToken to that lazy module in a form that it remains lazy?但首先,我如何以保持惰性的形式将 InjectionToken 之类的提供者传递给该惰性模块? Is there any way to pass a configuration to a lazy module like ModuleWithProviders forRoot()?有没有办法将配置传递给像 ModuleWithProviders forRoot() 这样的惰性模块?
the second parameter of createNgModuleRef
method is an Injector
, so you can pass either an existing injector with defined providers or use the static method Injector.create
to create a new injector, passing in providers, like so: createNgModuleRef
方法的第二个参数是一个Injector
,因此您可以传递一个带有已定义提供程序的现有注入器,或者使用 static 方法Injector.create
创建一个新的注入器,传递提供程序,如下所示:
Injector.create({ providers: [{ provide: `InjectionToken`, useValue: {}] });
Obviously you can provide any sort of StaticProvider
here, InjectionToken
is just a placeholder name.显然,您可以在此处提供任何类型的StaticProvider
, InjectionToken
只是一个占位符名称。
So a more complete example using your code might be:因此,使用您的代码的更完整示例可能是:
const { MappingModule } = await import('@hwrm/mapping');
const providers = [{ provide: SOME_CONFIG, useValue: { foo: 'bar' } }];
const injector = Injector.create({ providers });
const mapModuleRef = createNgModuleRef(MappingModule, injector);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.