角度分页-分页组件

Question

我创建了一个分页组件，让用户浏览网格中的页面。我尝试在特定页面上使用此组件，但收到错误：

'pager' is not a known element:
1. If 'pager' is an Angular component, then verify that it is part of this module.
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
</div>

[ERROR ->]<pager  (get-page)="getPage($event)"></pager>

我做错了什么？我也将这个添加到了我的app.module中。

import { PagerComponent } from './shared/pager.component';

这是我的pager组件。

html：

<div>
    <button (click)="goToPage(1)" [disabled]="pageNumber==1">
        <md-icon>first_page</md-icon>
    </button>
    <button (click)="previous()" [disabled]="pageNumber==1">
        <md-icon>chevron_left</md-icon>
    </button>
    <input #input type="text" style="width: 30px;height:30px" (keyup.enter)="goToPage(input.value)" [(value)]="pageNumber" >

    <button (click)="next()" [disabled]="pageNumber==totalPages">
        <md-icon>chevron_right</md-icon>
    </button>
    <button (click)="goToPage(totalPages)" [disabled]="pageNumber==totalPages">
        <md-icon>last_page</md-icon>
    </button>
    <br />
    Showing page {{pageNumber}} of {{totalPages}} pages.
</div>

组件：

import {Component, Input, EventEmitter, OnInit} from '@angular/core';

@Component({
    selector: 'pager',
    templateUrl: 'pager.component.html',
    outputs: ['getPage: get-page']
})
export class PagerComponent {
    @Input('total-pages') totalPages: number;
    @Input('total-items') totalItems: number;

    getPage: EventEmitter<any> = new EventEmitter();
    totalPages: number;
    pageNumber: number;

    constructor(){
        this.pageNumber = 1;
    }

    goToPage(page:number){
        this.pageNumber = page;
        this.getPage.emit({
            pageNumber: page
        });
    }

    previous(){
        if(this.pageNumber <= 1 || this.pageNumber > this.totalPages || isNaN(this.pageNumber)) {
            return;
        }
        this.pageNumber = Number(this.pageNumber) - 1;
        this.goToPage(this.pageNumber);
    }

    next(){
        if(this.pageNumber >= this.totalPages || this.pageNumber < 1 || isNaN(this.pageNumber)){
            return;
        }

        this.pageNumber =  Number(this.pageNumber) + 1;
        this.goToPage(this.pageNumber);
    }
}

在另一个组件中的用法: html：

<pager  (get-page)="getPage($event)"></pager>

组件：

import { PagerComponent } from '../shared/pager.component';

@Component({
    templateUrl: './list.component.html',
    providers: [PagerComponent]
}) 
.....

    getPage(page) {
            this.getItems(page);
        }

Answer 1

您导入了组件，但是否声明了它？

import { PagerComponent } from './shared/pager.component';

@NgModule({
  declarations: [PagerComponent] 
  // ...
})

此外，您不应该在另一个组件的providers数组中声明另一个组件。这是针对在该级别共享的注入服务的。