23

コンポーネント内のリストに使用するパイプを渡すことができるコンポーネントを作成しようとしています。テストして答えを探し回って見つけたものから、唯一の解決策は次のようなものを作成するようです。

<my-component myFilter="sortByProperty"></my-component>

my-componentテンプレート：

<li *ngFor="#item of list | getPipe:myFilter"></li>

次に、正しいパイプロジックにマップmyFilterして実行しますが、これは少し汚れていて最適ではないようです。

Angular 1以降、これらの線に沿って何かを行うことで、この問題に対するより良い解決策を彼らが思いついたと思いました。

Angular 2 でこれを行うより良い方法はありませんか?

4

7 に答える 7

3

残念ながらそうは思いません。これは、関数が必要な動的パイプの文字列を返す angular1 と同じです。

ドキュメントを見ると、それはまさに彼らがそれを示している方法でもあります。

https://angular.io/docs/ts/latest/guide/pipes.html

template: `
   <p>The hero's birthday is {{ birthday | date:format }}</p>
   <button (click)="toggleFormat()">Toggle Format</button>
`

次に、コントローラーで：

get format()   { return this.toggle ? 'shortDate' : 'fullDate'}

悲しいかな、それはもっと悪いかもしれません！:)

于 2016-04-12T08:32:40.080 に答える
0

パイプ プロバイダーをコンポーネントに送信することでこれを処理し、変換メソッドを実行します。そしてAngular 9で動作します。誰かの役に立てば幸いです! デモ: https://stackblitz.com/edit/angular-kdqc5e

パイプインジェクター.コンポーネント.ts:

import { Component, OnInit, Input, PipeTransform } from '@angular/core';
    @Component({
      selector: 'pipe-injector',
      template: `
        Should inject my pipe provider 
        {{ getText() }}
        `,
      providers: []
    })


    export class PipeInjectorComponent {
      @Input() pipeProvider: PipeTransform;
      @Input() pipeArgs: Array<any>;
      @Input() textToFormat: string;

      getText() {
        return this.pipeProvider.transform(this.textToFormat, ...this.pipeArgs);
      }
    }

app-component.ts:

import { Component, OnInit } from '@angular/core';
import { DatePipe } from '@angular/common';

@Component({
  selector: 'app-root',
  template: `
    <pipe-injector [pipeProvider]="pipeProvider" [pipeArgs]="pipeArgs" textToFormat='05-15-2020'> 
    </pipe-injector>
    `,
  providers: []
})

export class AppComponent implements OnInit {
  pipeArgs = ['dd/MM/yyyy'];
  constructor(public pipeProvider: DatePipe) {}
}

app.module.ts:

import { DatePipe } from '@angular/common';
import { PipeInjectorComponent } from './pipe-injector.component';

@NgModule({
  declarations: [

    PipeInjectorComponent,
  ],
  imports: [
  ],
  providers: [
    DatePipe,
    ],
  bootstrap: [AppComponent]
})
export class AppModule { }
于 2020-05-15T13:18:01.953 に答える