如何在angular2

时间:2016-11-07 06:54:44

标签: angular typescript

我有2个组件,     1)Table.component     2)Dashboard.component

我想在仪表板组件中使用表格模板,为此我在表格组件中声明了一个选择器

   selector: '[tables-basic]',   

table.template中有什么要包含的内容吗?

我在仪表板模块中导入了表组件,并且我声明了组件名称并将选择器放在仪表板组件中

 <tables-basic></tables-basic>

但是我得到了错误

    1. If 'tables-basic' is an Angular component, then verify that it is part of this module.
2. If 'tables-basic' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message. ("      <div id="tabs2c" class="tab-content bg-info-light">
            <div id = "tab2">
            [ERROR ->]<tables-basic></tables-basic>
              </div>
<!--      

我错过了任何事情。任何人都可以建议帮助。 我的uielement module.ts,

   import { CommonModule } from '@angular/common';
import { FormsModule,ReactiveFormsModule } from '@angular/forms';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { RouterModule } from '@angular/router';
import { AlertModule, TooltipModule } from 'ng2-bootstrap/ng2-bootstrap';
import { ButtonsModule, DropdownModule, PaginationModule  } from 'ng2-bootstrap/ng2-bootstrap';
import { DataTableDirectives } from 'angular2-datatable/datatable';
import { Ng2TableModule } from 'ng2-table';
import { HttpModule } from '@angular/http';
import { WidgetModule } from '../layout/widget/widget.module';
import { UtilsModule } from '../layout/utils/utils.module';
import { JqSparklineModule } from '../components/sparkline/sparkline.module';
import 'parsleyjs';
//import { TablesBasic } from './basic/tables-basic.component';
import { TablesDynamic } from './dynamic/tables-dynamic.component';
import { SearchPipe } from './dynamic/pipes/search-pipe';
import {Ng2PaginationModule} from 'ng2-pagination';


export const routes = [
  {path: '', redirectTo: 'basic', pathMatch: 'full'},
  // {path: 'basic', component: TablesBasic},
  {path: 'dynamic', component: TablesDynamic},
];

@NgModule({
  declarations: [
    // Components / Directives/ Pipes
    DataTableDirectives,
   // TablesBasic,
    TablesDynamic,
    SearchPipe
  ],
  imports: [
    CommonModule,
    Ng2PaginationModule,
    HttpModule,
    ReactiveFormsModule,
    JqSparklineModule,
    FormsModule,
    AlertModule,
    TooltipModule,
    ButtonsModule,
    DropdownModule,
    PaginationModule,
    WidgetModule,
    UtilsModule,
    Ng2TableModule,
    RouterModule.forChild(routes)
  ],
  schemas:  [ CUSTOM_ELEMENTS_SCHEMA ]
})
export default class UiElementsModule {
  static routes = routes;
}

1 个答案:

答案 0 :(得分:1)

将选择器更改为

selector: 'tables-basic',   

的元素
 <div tables-basic></div tables-basic>

(其中div可以是任何元素)

selector: '[tables-basic]',是一个属性选择器,需要匹配的属性而不是元素名称。