分享
三行代码  ›  专栏  ›  技术社区  ›  Smokey Dawson

动态添加组件角度5

  •  2
  • Smokey Dawson  · 技术社区  · 1 年前

    我有个问题,不知道是什么问题。

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

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

    所以路线是这样设置的

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

    然后在app.module中,我添加了我试图动态添加到 entryComponents 就像这样…

    entryComponents: [
        CoolToolComponent
    ]
    

    那么在我的工具视图组件中我有这个

    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..
    

    我想避免这样做。

    任何帮助都将不胜感激!

    谢谢

    1 回复  |  直到 1 年前
        1
  •  1
  •   sugarme    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);
    }
    
    }