在 Angular 6 中封装 ng2-table答案

【问题标题】：Encapsulating ng2-table in Angular 6在 Angular 6 中封装 ng2-table
【发布时间】：2018-12-25 19:39:25
【问题描述】：

这是一个新手问题，所以请多多包涵。我想抽象 ng2-table 将它包装在一个可重用的组件中。首先，我定义了一个模板：

table.comp.html

<ng-table [config]="config"
          [rows]="rows" [columns]="columns">
</ng-table>

然后，我定义了组件：

table.comp.ts

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

@Component({
  selector: 'my-table',
  templateUrl: 'table.comp.html',
  styles: []
})
export class TableComponent {
    
    columns:Array<any> = [
            {title: 'Name', name: 'name'},
            {title: 'Id', name: 'id'},
            {title: 'Age', name: 'age'},
          ];

    config:any = {
                paging: true,
                sorting: {columns: this.columns}
              };

 
    rows = [ .. // rows will be populated here  // .. ]
 }

最后，我定义了一个模块来导入 ng2-table：

table.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { Ng2TableModule } from 'ng2-table/ng2-table';
import { TableComponent } from './table.comp';

@NgModule({
  declarations: [
      TableComponent
  ],
  imports: [
    BrowserModule,
    Ng2TableModule
  ],
  bootstrap: [TableComponent]
})
export class TableModule {}

要调用my-table，我将其导入以下模块：

@NgModule({
  declarations: [
    CallingComponent
  ],
  imports: [
    BrowserModule,
    TableModule
  ],
  bootstrap: [CallingComponent]
})
export class CallingModule {}

以及相关的组件：

@Component({
      selector: 'some-selector',
      template: '<my-table></my-table>'
    })
export class CallingComponent {}

我在浏览器控制台中收到以下错误：

'my-table' 不是已知元素：

...

如何解决这个问题？

【问题讨论】：

标签： angular

【解决方案1】：

您需要导出组件才能在其他模块中使用。

例如：

@NgModule({
  declarations: [
      TableComponent
  ],
  exports: [
     TableComponent   // <-- this was missing
  ],
  imports: [
    BrowserModule,
    Ng2TableModule
  ],
  bootstrap: [TableComponent]
})
export class TableModule {}

【讨论】：