angular - Angular通过构造函数调用组件失败但可以在打字稿文件中正常导入

Question

我正忙于在 Angular 项目中使用 angularSlickgrid 库。我创建了一个下拉组件以在我的网格中使用，但这是问题所在......当我尝试导入组件并在没有构造函数的情况下调用它时，它会加载并且下拉菜单创建得很好..但是一旦我尝试加载相同的组件通过其构造函数我得到以下错误：

“错误：未捕获（承诺中）：错误：未找到 [object Object] 的组件工厂。您是否将其添加到 @NgModule.entryComponents？

我已经确保我的导入是正确的，这里是我的 autenticated.module.ts 的相关部分：

import { CrmGridViewComponent } from './crm/crmGridListView/crnm-grid-view/crnm-grid-view.component';
import { GridDropDownCreator } from './components/gridDropdownComponent/gridDropDown';

declarations: [
    CrmGridViewComponent,
    GridDropDownCreator,
],
  entryComponents: [
   GridDropDownCreator,
   CrmGridViewComponent, 
]

现在就像我说的，如果下拉组件没有构造函数，它可以工作......下拉：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-dropdown',
  template: `
   <div id="{{dropdownId}}" class="dropdown" style="position:absolute; z-index:12000;">
  <a class="dropdown-toggle"
     id="{{dropDownToggleId}}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Actions
    <span class="caret"></span>
  </a>
  <ul class="dropdown-menu padding10">
    <li><span class="text-primary text-center" >{{dataContext.title}}</span></li>
    <li role="separator" class="divider"></li>
    <li><span class='pointer'>View contacts</span></li>
    <li><span class='pointer'>Edit</span></li>
      <li><span class='pointer'>Delete</span></li>
  </ul>
</div>`,
  //templateUrl: './dropdown.component.html',


})
export class GridDropDownCreator {
  // constructor(labelFor: string) { //uncommented is wat I actually want to achieve.. this is a test for bigger data to come
  //   console.log('the constructor fired : ');
  // }
  parent: any; // parent component context
  row: number;
  dataContext: any;
  dropdownId = 'companyDropDown';
  dropDownToggleId = 'toggleDrop';
}

这是我尝试访问组件的地方：

import { Column, GridOption, AngularUtilService, Formatters, AngularGridInstance, BsDropDownService, OnEventArgs } from 'angular-slickgrid';
import { GridDropDownCreator } from 'pathToFile/gridDropdownComponent/gridDropDown';


  prepareGrid() {
    this.columnDefinitions = [
      // ['name', 'surname', 'telNr', 'cellNr', 'email', 'tags', 'options'];
      { id: 'name', name: 'Name', field: 'name', sortable: true, filterable: true, },
      { id: 'category', name: 'Category', field: 'category', sortable: true, filterable: true },
      { id: 'vatNo', name: 'vatNo', field: 'vatNo', sortable: true, filterable: true },
      { id: 'description', name: 'Description', field: 'description', sortable: true, filterable: true },
      { id: 'tags', name: 'Tags', field: 'tags', sortable: true, filterable: true },
      {
        id: 'action',
        name: 'Action',
        field: 'id',
        formatter: Formatters.bsDropdown,
        params: { label: 'Action' },
        onCellClick: (e: Event, args: OnEventArgs) => {
         // const comp = new GridDropDownCreator('company'); //this is what I want but it doesn't work this way
          this.bsDropdown.render({
            component: comp, //change this to the imported dropdown (GridDropDownCreator) and comment out the constructor and it will display the dropdown
            args,
            offsetLeft: 92,
            offsetDropupBottom: 15,
            parent: this, // provide this object to the child component so we can call a method from here if we wish
          });
        },
        // exportCustomFormatter: Formatters.complexObject,
        // asyncPostRender: this.renderAngularComponent.bind(comp),
      }
    ];

    this.gridOptions = {
      enableAutoResize: true,
      enableSorting: true,
      enableColumnReorder: false, 
      enableFiltering: true,
      enablePagination: true,
      enableAsyncPostRender: true, 
      asyncPostRenderDelay: 0,    
      rowHeight: 50,
      rowSelectionOptions: {
        // True (Single Selection), False (Multiple Selections)
        selectActiveRow: false
      },
      params: {
        angularUtilService: this.angularUtilService // provide the service to all at once (Editor, Filter, AsyncPostRender)
      }
    };

    // fill the dataset with your data
    this.dataset = [ /** ...your data... **/];
  }

总结一下我如何通过 is constructor 调用 GridDropDownCreator 的问题？没有它给我这个错误：“错误：未捕获（承诺）：错误：没有为[object Object]找到组件工厂。您是否将其添加到@NgModule.entryComponents？

多谢你们！

标签： angulartypescriptangular-slickgrid