5

私の Angular アーキテクチャは 3 つのモジュールで構成されています。

  • AppModule(アプリのプレゼンテーションとロジックが存在する場所)
  • CoreModule(API にアクセスするためのサービスが含まれています)
  • SharedModule(私のモデル、パイプ、ディレクティブなどが含まれています...)

に新しいパイプを追加したいSharedModuleので、パイプを作成してから、のデコレータのdeclarationsおよびexportsフィールドに追加します。SharedModuleNgModule

次に、 にAppModuleをインポートSharedModuleし、パイプにアクセスできるようにします。しかし、そこには、私はできません。代わりに、次のエラーがあります。

キャッチされないエラー: テンプレート解析エラー: パイプ 'rankingposition' が見つかりませんでした

コードがあります：

ランキング位置.パイプ.ts

import { Pipe, PipeTransform } from "@angular/core";

@Pipe({ name: 'rankingposition' })
export class RankingPositionPipe implements PipeTransform {
    transform(value: any, ...args: any[]) {
        // Do stuff    
    }
}

shared.module.ts

import { NgModule } from "@angular/core";
import { RankingPositionPipe } from "@app/shared/pipes/ranking-position.pipe";

@NgModule({
    declarations: [RankingPositionPipe],
    exports: [RankingPositionPipe]
})
export class SharedModule {}

app.module.ts

import { NgModule } from '@angular/core';
...
import { SharedModule } from '@app/shared/shared.module';

@NgModule({
  declarations: [...],
  imports: [
    ...,
    SharedModule
  ],
  providers: [],
  bootstrap: [...]
})
export class AppModule { }

編集：私のコンポーネントコードを追加してください：

ランキング.コンポーネント.ts

import { Component } from "@angular/core";
import { CharacterModel } from "@app/shared/models/character.model";

@Component({
    selector: 'ranking',
    templateUrl: './ranking.component.html'
})
export class RankingComponent {
    public characters: Array<CharacterModel>;

    constructor() {
        this.characters = new Array<CharacterModel>();
    }
}

ランキング.component.html

<div class="card">
  <div class="card-header">
    Ranking
  </div>
  <div class="card-body">
    <ul>
      <li *ngFor="let character of characters; let i = index">
        {{ character.level | rankingposition }}
      </li>
    </ul>
  </div>
</div>

私は何か見落としてますか？

4

0 に答える 0