角型ページャ - ページャコンポーネント

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配列内のコンポーネントを宣言するべきではありません。それは、そのレベルで共有される注入サービスのためです。