使用角度2集成自定义分页组件时遇到问题

时间:2017-12-20 10:15:24

标签: angular

我使用Angular2创建了自定义分页组件,但在尝试在另一个组件中使用它时,收到以下错误

Can't bind to 'offset' since it isn't a known property of 'app-pagination'.

app.module.ts

 import { PaginationComponent } from './components/pagination.component';
import { ComplaintModule } from './pages/complaints/complaints.module';
    import { App } from './app.component';
        @NgModule({
          bootstrap: [App],
          declarations: [
            App,
            PaginationComponent
          ],
           imports: [ // import Angular's modules
           BrowserModule,
           ComplaintModule

          ]})
        export class AppModule {
          constructor(public appState: AppState) {
          }
        }

尝试集成以下html文件

complaints.html

<app-pagination [offset]="offset" [limit]="limit" [size]="count" (pageChange)="onPageChange($event)"></app-pagination> 

pagination.component.ts

@Component({
  selector: 'app-pagination',
  templateUrl: './pagination.component.html',
  styleUrls: ['./pagination.component.scss']
})
export class PaginationComponent implements OnInit, OnChanges {
  @Input() offset: number = 0;
  @Input() limit: number = 1;
  @Input() size: number = 1;
  @Input() range: number = 3;

constructor() { }
}

1 个答案:

答案 0 :(得分:3)

您需要创建一个单独的SharedModule,以便在多个模块中使用PaginationComponent

shared.module.ts

@NgModule({
    declarations: [
        PaginationComponent
    ],
    exports: [
        PaginationComponent
    ]
})
export class SharedModule { 
}
抱怨.module.ts

@NgModule({
    imports: [
        SharedModule,
        ...
    ]
    ...
})
export class ComplaintModule {

}

一些-other.module.ts

@NgModule({
    imports: [
        SharedModule,
        ...
    ]
    ...
})
export class SomeOtherModule {

}

现在,您应该可以在PaginationComponentComplaintModule中使用SomeOtherModule