Question

他试图在我隐含的MatPaginatorIntl中添加TranslateService，它向我显示以下错误。这段代码是jhipster的一部分，我在共享的forlder中添加了这个实现。

错误：

Uncaught Error: Can't resolve all parameters for SharedPaginatorIntl: (?).
at syntaxError (eval at ./node_modules/@angular/compiler/@angular/compiler.es5.js (vendor.bundle.js:135), <anonymous>:1917:34)
at CompileMetadataResolver._getDependenciesMetadata (eval at ./node_modules/@angular/compiler/@angular/compiler.es5.js (vendor.bundle.js:135), <anonymous>:15984:35)
at CompileMetadataResolver._getTypeMetadata (eval at ./node_modules/@angular/compiler/@angular/compiler.es5.js (vendor.bundle.js:135), <anonymous>:15852:26)
at CompileMetadataResolver._getInjectableMetadata (eval at ./node_modules/@angular/compiler/@angular/compiler.es5.js (vendor.bundle.js:135), <anonymous>:15838:21)
at CompileMetadataResolver.getProviderMetadata (eval at ./node_modules/@angular/compiler/@angular/compiler.es5.js (vendor.bundle.js:135), <anonymous>:16129:40)
at eval (eval at ./node_modules/@angular/compiler/@angular/compiler.es5.js (vendor.bundle.js:135), <anonymous>:16058:49)
at Array.forEach (<anonymous>)
at CompileMetadataResolver._getProvidersMetadata (eval at ./node_modules/@angular/compiler/@angular/compiler.es5.js (vendor.bundle.js:135), <anonymous>:16018:19)
at CompileMetadataResolver.getNgModuleMetadata (eval at ./node_modules/@angular/compiler/@angular/compiler.es5.js (vendor.bundle.js:135), <anonymous>:15673:50)
at CompileMetadataResolver.getNgModuleSummary (eval at ./node_modules/@angular/compiler/@angular/compiler.es5.js (vendor.bundle.js:135), <anonymous>:15526:52)

Shared folder structure

index.ts

export * from './constants/pagination.constants';
export * from './alert/alert.component';
export * from './alert/alert-error.component';
export * from './auth/csrf.service';
export * from './auth/state-storage.service';
export * from './auth/account.service';
export * from './auth/auth-oauth2.service';
export * from './auth/principal.service';
export * from './auth/has-any-authority.directive';
export * from './auth/user-route-access-service';
export * from './language/language.constants';
export * from './language/language.helper';
export * from './language/find-language-from-key.pipe';
export * from './tracker/tracker.service';
export * from './login/login.component';
export * from './login/login.service';
export * from './login/login-modal.service';
export * from './user/account.model';
export * from './user/user.model';
export * from './user/user.service';
export * from './model/response-wrapper.model';
export * from './model/request-util';
export * from './model/base-entity';
export * from './shared-libs.module';
export * from './shared-common.module';
export * from './shared.module';
export * from './own/shared-bce-table.component';
export * from './own/shared-table-query-service';
export * from './own/shared-data-source';
export * from './own/shared-paginator-intl';

shared.module.ts

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { DatePipe } from '@angular/common';
import {TranslateModule} from '@ngx-translate/core';

import {
BuildingcSharedLibsModule,
BuildingcSharedCommonModule,
CSRFService,
AuthServerProvider,
AccountService,
UserService,
StateStorageService,
LoginService,
LoginModalService,
Principal,
JhiTrackerService,
HasAnyAuthorityDirective,
JhiLoginModalComponent,
} from './';

@NgModule({
imports: [
    BuildingcSharedLibsModule,
    BuildingcSharedCommonModule,
    TranslateModule
],
declarations: [
    JhiLoginModalComponent,
    HasAnyAuthorityDirective
],
providers: [
    LoginService,
    LoginModalService,
    AccountService,
    StateStorageService,
    Principal,
    CSRFService,
    JhiTrackerService,
    AuthServerProvider,
    UserService,
    DatePipe,
    TranslateModule
],
entryComponents: [JhiLoginModalComponent],
exports: [
    BuildingcSharedCommonModule,
    JhiLoginModalComponent,
    HasAnyAuthorityDirective,
    DatePipe
],
schemas: [CUSTOM_ELEMENTS_SCHEMA]

})
export class BuildingcSharedModule {}

我的实施：

 import {MatPaginator, MatPaginatorIntl} from '@angular/material';
 import {Component} from '@angular/core';
 import {TranslateService} from '@ngx-translate/core';

export class SharedPaginatorIntl extends MatPaginatorIntl {

itemsPerPageLabel = 'Total por página';
nextPageLabel     = 'Siguiente Página';
previousPageLabel = 'Anterior Página';

constructor(private translateService: TranslateService) {
    super();
}

getRangeLabel = function (page, pageSize, length) {
    if (length === 0 || pageSize === 0) {
        return '0 de ' + length;
    }
    length = Math.max(length, 0);
    const startIndex = page * pageSize;
    // If the start index exceeds the list length, do not try and fix the end index to the end.
    const endIndex = startIndex < length ?
        Math.min(startIndex + pageSize, length) :
        startIndex + pageSize;
    return startIndex + 1 + ' - ' + endIndex + ' de ' + length;
};
}

Answer 1

您必须使用

注释自定义PaginatorIntl

@Injectable()

能够使用Angular-DI。

所以在你的情况下，它将是：

@Injectable()
export class SharedPaginatorIntl extends MatPaginatorIntl {
...

在MatPaginator中翻译服务

1 个答案: