Question

这是一个新手问题，请耐心等待。我想抽象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”不是已知元素：

...

如何解决此问题？

Answer 1

您需要导出组件以在其他模块中可用。

例如：

C++20

在Angular 6中封装ng2-table

1 个答案: