英文:
Pass data to dynamically created angular modules and components
问题
我需要将数据传递给动态创建的Angular模块,比如一个ID或JSON。我的控制器代码如下。
逻辑解释 - API提供了页面布局,如果首选模块首先出现或次选模块(还有更多模块不能通过ngif处理),所有模块都具有不同的设计,主要和次要都具有不同的样式,这也由API决定。ID是决定页面所有设计的关键
export class MainLayoutComponent implements OnInit {
modules: any = [
{
module: PrimaryModule,
component: PrimaryLandingPageComponent,
id: 1
},
{
module: SecondaryModule,
component: SecondaryLandingPageComponent,
id: 2
},
];
constructor(public compiler: Compiler) { }
returnCompiledModule(moduleItem) {
return this.compiler.compileModuleSync(moduleItem);
}
ngOnInit() {
console.log('hello');
}
}
我之所以这样做是因为我有页面的布局是由API决定的,每个模块都有不同类型的组件和不同的设计(代码已被省略)。这是我在HTML中渲染的方式。
<ng-container *ngFor="let module of modules">
<ng-container
*ngComponentOutlet="module.component;
ngModuleFactory: returnCompiledModule(module.module);">
</ng-container>
</ng-container>
有没有办法可以通过路由将数据传递给模块或其对应的组件,或者通过JSON中的ID值或JSON本身,还有其他我可能遗漏的语法糖,服务或编译器本身?我在这里卡住了一段时间,任何帮助都将不胜感激。还有没有其他方法可以在Angular版本8中实现这一点,而不需要IVY?提前感谢您的帮助。
英文:
I need to pass data to a dynamically created angular module like an id or JSON my controller code is like this.
Logic Explained - The API provides the layout of the page if primary module comes first or secondary module (There are more which cannot be handled by an ngif) all modules have different designs primary and secondary have n no of styles which are also decided by the API too. The id is the key to decide all the designs of that page
export class MainLayoutComponent implements OnInit {
modules: any = [
{
module: PrimaryModule,
component: PrimaryLandingPageComponent,
id: 1
},
{
module: SecondaryModule,
component: SecondaryLandingPageComponent,
id: 2
},
];
constructor(public compiler: Compiler) { }
returnCompiledModule(moduleItem) {
return this.compiler.compileModuleSync(moduleItem);
}
ngOnInit() {
console.log('hello');
}
}
why I am doing like this is because I have the layout of the page which is decided by the API and each module has different types of components with different designs (That code has been omitted) This is how I am rendering in HTML
<ng-container *ngFor="let module of modules">
<ng-container
*ngComponentOutlet="module.component;
ngModuleFactory: returnCompiledModule(module.module);">
</ng-container>
</ng-container>
Is there any way I can pass data to the module or the component corresponding to it the id values in the JSON or the JSON itself via the router, another syntactical sweetener I may be missing, services or the compiler itself I have been stuck here for some time any help would be appreciated or is there any other way to do this is in angular version 8 without IVY Thanks in advance.
答案1
得分: 3
In order to pass data to dynamically created components using ngComponentOutlet
, you can use Injector
.
Just add this function to your MainLayoutComponent
:
getInjector(moduleItem) {
return Injector.create([
{ provide: Number, useValue: moduleItem.id }
], this.injector);
}
and change its constructor to inject Injector
object:
constructor(public compiler: Compiler, private injector: Injector) { }
Then - as you can see in the docs - inside ngComponentOutlet
you can pass the data by specifying the injector like this:
<ng-container *ngFor="let module of modules">
<ng-container
*ngComponentOutlet="module.component;
ngModuleFactory: returnCompiledModule(module.module);
injector: getInjector(module);"></ng-container>
</ng-container>
Now each of your Component
classes which can be dynamically created (PrimaryLandingPageComponent
, SecondaryLandingPageComponent
etc.) should contain id
argument in its constructor which you can further use as needed:
constructor(id: Number) {
// do whatever you need with id value
}
I haven't tested this code so you would probably need to fix some issues, but hopefully you get the idea.
英文:
In order to pass data to dynamically created components using ngComponentOutlet
, you can use Injector
.
Just add this function to your MainLayoutComponent
:
getInjector(moduleItem) {
return Injector.create([
{ provide: Number, useValue: moduleItem.id }
], this.injector);
}
and change its constructor to inject Injector
object:
constructor(public compiler: Compiler, private injector: Injector) { }
Then - as you can see in the docs - inside ngComponentOutlet
you can pass the data by specifying the injector like this:
<ng-container *ngFor="let module of modules">
<ng-container
*ngComponentOutlet="module.component;
ngModuleFactory: returnCompiledModule(module.module);
injector: getInjector(module);">
</ng-container>
</ng-container>
Now each of your Component
classes which can be dynamically created (PrimaryLandingPageComponent
, SecondaryLandingPageComponent
etc.) should contain id
argument in its constructor which you can further use as needed:
constructor(id: Number) {
// do whatever you need with id value
}
I haven't tested this code so you would probably need to fix some issues, but hopefully you get the idea.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论