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';

这是我的寻呼机组件。

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数组中声明组件。这是针对在该级别共享的注入服务。

角度分页 - 寻呼机组件

1 个答案: