将数据传递给动态创建的Angular模块和组件。

huangapple go评论90阅读模式
英文:

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(&#39;hello&#39;);
 }

}

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

&lt;ng-container *ngFor=&quot;let module of modules&quot;&gt;
  &lt;ng-container 
    *ngComponentOutlet=&quot;module.component; 
    ngModuleFactory: returnCompiledModule(module.module);&quot;&gt;
  &lt;/ng-container&gt;
&lt;/ng-container&gt;

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:

&lt;ng-container *ngFor=&quot;let module of modules&quot;&gt;
  &lt;ng-container 
    *ngComponentOutlet=&quot;module.component; 
                        ngModuleFactory: returnCompiledModule(module.module);
                        injector: getInjector(module);&quot;&gt;
  &lt;/ng-container&gt;
&lt;/ng-container&gt;

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.

huangapple
  • 本文由 发表于 2020年1月6日 16:21:57
  • 转载请务必保留本文链接:https://go.coder-hub.com/59608781.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定