Angular+ASP.NET COREを使ったweb開発を行っています。
ページングに必要な情報をサービスとしておりまして、今後このサービスを色々な画面で使おうと思い、コンポーネント毎にインスタンスを生成しようと考えました。
restaurants-list-components.ts
import { PaginationService } from '../dataServices/pagination.service';
@Component({
selector: 'restaurants',
templateUrl: './restaurants-list-component.html',
styleUrls: ["./restaurants-list-component.css"],
providers: [PaginationService]
})
export class RestaurantListComponent implements OnInit{
constructor(
private paginationService: PaginationService,
) {
}
#以下略
}
foods-list-components.ts
import { PaginationService } from '../dataServices/pagination.service';
@Component({
selector: 'foods',
templateUrl: './foods-list-component.html',
providers: [PaginationService]
})
export class FoodsListComponent implements OnInit{
constructor(private paginationService: PaginationService) {}
#以下略
}
pagination.service.ts
import { Injectable } from '@angular/core';
import { PageEvent } from '@angular/material/paginator';
@Injectable()
export class PaginationService {
private paginationModel: PaginationModel;
get page(): number {
return this.paginationModel.pageIndex;
}
set page(pageIndex) {
this.paginationModel.pageIndex = pageIndex;
}
get orderBy(): string {
return this.paginationModel.orderBy.trim();
}
get orderDirection(): string {
return this.paginationModel.orderDirection.trim();
}
get filterKey(): string {
return this.paginationModel.filterKey;
}
set filterKey(key) {
this.paginationModel.filterKey = key;
}
get selectItemsPerPage(): number[] {
return this.paginationModel.selectItemsPerPage;
}
get pageCount(): number {
return this.paginationModel.pageSize;
}
constructor() {
this.paginationModel = new PaginationModel();
}
init() {
this.paginationModel.pageSize = this.selectItemsPerPage[0];
this.paginationModel.pageIndex = 1;
this.paginationModel.orderBy = '';
this.paginationModel.orderDirection = '';
this.paginationModel.filterKey = '';
this.paginationModel.allItemsLength = 0;
}
change(pageEvent: PageEvent) {
if (this.paginationModel.pageSize === pageEvent.pageSize) {
this.paginationModel.pageIndex = pageEvent.pageIndex + 1;
} else {
this.paginationModel.pageIndex = 1;
}
this.paginationModel.pageSize = pageEvent.pageSize;
this.paginationModel.allItemsLength = pageEvent.length;
}
filterChange(filterValue: string) {
this.paginationModel.filterKey = filterValue.trim().toLowerCase();
}
sortChange(event) {
this.paginationModel.orderDirection = event.direction;
this.paginationModel.orderBy = event.active;
}
}
export class PaginationModel {
selectItemsPerPage: number[] = [10, 20, 50, 100];
pageSize = this.selectItemsPerPage[0];
pageIndex = 1;
orderBy = '';
orderDirection = '';
filterKey = '';
allItemsLength = 0;
}
このコードを実行したときに何も結果が表示されなくなったので、developer toolでPaginationServiceにカーソルを当てたところ、
@Componen内のproviders: [PaginationService]にてエラーが起きてしまいました。
エラーメッセージは以下の通りです。
"_dataServices_pagination_service__WEBPACK_IMPORTED_MODULE_6__ is not defined"
スタック内容は以下のとおりです。
"ReferenceError: _dataServices_pagination_service__WEBPACK_IMPORTED_MODULE_6__ is not defined
at eval (eval at <anonymous> (http://localhost:57636/main.js:857:13), <anonymous>:1:1)
at SafeSubscriber._next (http://localhost:57636/main.js:857:13)
at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub (http://localhost:57636/vendor.js:149039:16)
at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next (http://localhost:57636/vendor.js:148977:22)
at Subscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next (http://localhost:57636/vendor.js:148923:26)
at Subscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (http://localhost:57636/vendor.js:148900:18)
at MapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/map.js.MapSubscriber._next (http://localhost:57636/vendor.js:153942:26)
at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (http://localhost:57636/vendor.js:148900:18)
at FilterSubscriber.push../node_modules/rxjs/_esm5/internal/operators/filter.js.FilterSubscriber._next (http://localhost:57636/vendor.js:153381:30)
at FilterSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (http://localhost:57636/vendor.js:148900:18)"
因みにapp.module.ts内のprovidersの定義にPaginationServiceは含まれております。
以上、よろしくおねがいします。