angular - 动态添加组件 Angular 5

Question

我遇到了一个问题，我不确定是什么问题。

所以我想使用查询参数将组件动态添加到我拥有的另一个组件。

所以我动态添加了组件，但是当我使用具有完全相同名称的查询字符串时它不起作用

所以路由是这样设置的

{
    path: 'tool-view/:tool',
    component: ToolViewerComponent
}

然后在 app.module 中，我将尝试动态添加的组件添加到 entryComponents 中，就像这样...

entryComponents: [
    CoolToolComponent
]

然后在我的 toolViewerComponent 中有这个

import { Component, OnInit, ViewChild, ViewContainerRef, ComponentFactoryResolver } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

// Tool Components
import { CoolToolComponent } from '../tools/cool-tool/cool-tool.component';

@Component({
  selector: 'app-tool-viewer',
  templateUrl: './tool-viewer.component.html',
  styleUrls: ['./tool-viewer.component.scss']
})
export class ToolViewerComponent implements OnInit {

  @ViewChild('entry', { read: ViewContainerRef }) entry: ViewContainerRef;

  constructor(
    private _resolver: ComponentFactoryResolver,
    public activatedRoute: ActivatedRoute
  ) { }

  ngOnInit() {
    // Resolvers
    const coolFactory = this._resolver.resolveComponentFactory(CoolToolComponent);
    const toolComponent = this.entry.createComponent(coolFactory);
  }
}

好的，这样就可以了，现在当我尝试这样做时，组件被添加到页面上没有问题......

@ViewChild('entry', { read: ViewContainerRef }) entry: ViewContainerRef;

constructor(
  private _resolver: ComponentFactoryResolver,
  public activatedRoute: ActivatedRoute
) { }

ngOnInit() {
  this.activatedRoute.params.subscribe(params => {
    this.createComponent(params.tool);
  });
}

createComponent(tool) {
  const toolFactory = this._resolver.resolveComponentFactory(tool);
  const toolComponent = this.entry.createComponent(toolFactory);
}

但这不起作用，我得到了错误

No component factory found for CoolToolComponent. Did you add it to @NgModule.entryComponents?

我不完全确定这里发生了什么，但我想我可能是这样的事实，即在 createComponent(tool) 中，该工具以字符串形式出现 "CoolToolComponent" 而不是 CoolToolComponent ??

但我不确定。

我能想到的唯一其他方法是使用一堆 if 语句。

if(params.tool = 'CoolToolComponent') {
    const hba1cFactory = this._resolver.resolveComponentFactory(Hba1cTracker);
    const toolComponent = this.entry.createComponent(hba1cFactory);
} etc..

我想避免这样做。

如有任何帮助，我们将不胜感激!

谢谢

Answer 1

您可以创建一个数组来保存您的动态组件集，路由参数是相应组件的键。像这样:

import { Component } from '@angular/core';
...
import { ToolComponent} from './tool.component';

@Component({...})
export class ToolViewerComponent  {
  ...

  tools: Component[] = new Array();

  constructor() {
    // add more tools here...
    this.tools['tool'] = ToolComponent;
  }

  ngOnInit() {
  this.activatedRoute.params.subscribe(params => {
    let toolName = param.tool;
    this.createComponent(this.tools[toolName]);
  });
}

createComponent(tool: Component) {
  const toolFactory = this._resolver.resolveComponentFactory(tool);
  const toolComponent = this.entry.createComponent(toolFactory);
}

}