Angular 2 - 无法绑定(bind)到 'settings'，因为它不是 'my-datatable' 的已知属性

Question

想用guards和advancerouting，就按照官方的路由教程

我创建了一个模块，将所有与我的组件相关的东西都放在里面(customers.routing.ts, customers.service.ts, customers.component.ts ....)

因为它返回了那个错误:

Unhandled Promise rejection: Template parse errors:
Can't bind to 'settings' since it isn't a known property of 'my-datatable'.
1. If 'my-datatable' is an Angular component and it has 'settings' input, then verify that it is part of this module.
2. If 'my-datatable' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("v *ngIf="customers">
        <div class="customersDataTableWrapperDiv">
            <my-datatable [ERROR ->][settings]="tableSettings" (onError)="onDataTableError($event)" ></my-datatable>
        </div>
   "): ng:///CustomersModule/CustomersComponent.html@11:26
'my-datatable' is not a known element:
1. If 'my-datatable' is an Angular component, then verify that it is part of this module.
2. If 'my-datatable' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
    <div *ngIf="customers">
        <div class="customersDataTableWrapperDiv">
            [ERROR ->]<my-datatable [settings]="tableSettings" (onError)="onDataTableError($event)" ></my-datatable>
     "): ng:///CustomersModule/CustomersComponent.html@11:12 ; Zone: <root> ; Task: Promise.then ; Value: Error: Template parse errors:

客户.component.html :

<my-datatable [settings]="tableSettings"></my-datatable>

数据表.component.ts:

...
@Component({
    selector: 'my-datatable',
    templateUrl: './dataTable.component.html',
    styleUrls: ['./dataTable.component.css'],
})

export class DataTableComponent implements OnInit {
...
    @Input() settings: any;

但是 app.module.ts 已经使用了那个 DataTableComponent，我没有删除它

这是我创建的模块(现在在 app.module.ts 中引用用于导入):

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { ReactiveFormsModule, FormBuilder } from '@angular/forms';

import { CustomersComponent } from './customers.component';
import { CustomerComponent } from './customer.component';
import { CustomersService } from './customers.service';
import { CustomersRoutingModule } from './customers.routing';

import { DataTableModule } from '../components/dataTable/dataTable.module';

@NgModule({
    imports: [
        CommonModule,
        FormsModule,
        CustomersRoutingModule,
        ReactiveFormsModule,
        DataTableModule
    ],
    declarations: [
        CustomersComponent,
        CustomerComponent,
    ],
    providers: [CustomersService,FormBuilder],
})
export class CustomersModule {}

我在这里错过了什么？谢谢

[编辑:这是我的 DataTableModule:

import { NgModule } from '@angular/core';
import { DataTableComponent } from './dataTable.component';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
    imports: [CommonModule,FormsModule,ReactiveFormsModule],
    declarations: [DataTableComponent],
    exports: [DataTableComponent]
})
export class DataTableModule{
}

]

Answer 1

您应该将您的 DatatableComponent 添加到模块中:

@NgModule({
    imports: [],
    declarations: [DatatableComponent],
    exports: [DatatableComponent]
})
export class DatatableModule{
}

在您的 View 中，导入模块:DatatableModule。

@NgModule({
    imports: [DatatableModule],
    declarations: [],
    exports: []
})
export class MyCurrentViewModule{
}

更新 1:

尝试将 CommonModule 添加到您的 DatatableModule，如下所示:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { DatatableComponent } from './datatable.component';

@NgModule({
    imports: [
        CommonModule
    ],
    declarations: [DatatableComponent],
    exports: [DatatableComponent]
})
export class DatatableModule{
}