Apakah mungkin menggunakan pipa dalam kode?


104

Saat saya menggunakan pipa kustom saya dalam template, ini seperti ini:

{{user|userName}}

Dan itu bekerja dengan baik.

Apakah mungkin menggunakan pipa dalam kode?

Saya mencoba menggunakannya seperti ini:

let name = `${user|userName}`;

Tapi itu terlihat

userName tidak ditentukan

Cara alternatif saya adalah menggunakan db.collection.findOne()kode secara manual. Tapi apakah ada cara cerdas?


Anda tidak dapat menggunakan template seperti ini, Anda harus menyuntikkan pipa ke kontraktor Anda
Yoann Prot

maaf, saya akan menjelaskannya. Saya sudah menyuntikkan pipa
Hongbo Miao

Pipa mana yang Anda coba gunakan dalam kode? Apakah ini pipa khusus Anda?
Siva

1
Saya tidak berpikir bahwa Anda bisa karena ...tidak dieksekusi oleh Angular. Ini adalah interpolasi string ES6 ...
Thierry Templier

Jawaban:


113

Pertama-tama deklarasikan pipa di providersmodul Anda:

import { YourPipeComponentName } from 'your_component_path';

@NgModule({
  providers: [
    YourPipeComponentName
  ]
})
export class YourServiceModule {
}

Kemudian Anda dapat menggunakan @Pipekomponen seperti ini:

import { YourPipeComponentName } from 'your_component_path';

class YourService {

  constructor(private pipe: YourPipeComponentName) {}

  YourFunction(value) {
    this.pipe.transform(value, 'pipeFilter');
  }
}

1
Terlihat bagus! Tetapi untuk beberapa alasan injeksi ketergantungan tidak dapat menyuntikkan pipa saya ke konstruktor, meskipun dapat digunakan di html tanpa masalah. Itu dideklarasikan dan diekspor di modul lain, mungkin perlu ada dalam daftar penyedia juga? Membuat dan menggunakan instance baru MyPipe memang berfungsi. Hanya DI yang punya masalah ...
Sam

19
@Sam Memang itu perlu di providers. Tambahkan YouPipeComponentNameke Anda providersdan metode ini akan bekerja dengan sempurna.
SrAxi

4
Pastikan juga Anda menambahkannya ke penyedia yang benar. Jika Anda ingin menggunakan pipa secara global, letakkan di penyedia app.module. Jika Anda ingin menggunakannya hanya di beberapa modul yang dimuat dengan lambat, letakkan di penyedia modul masing-masing
Phil

Jalur impor salah. Pipa tidak akan tersedia di bawah @ angular / common
Andris

@Andris saya sudah mengeditnya. Itu adalah sebuah kesalahan. Maksud saya, Anda harus mengimpor modul pipa Anda.
saghar.fadaei

107

@Siva benar. Dan terimakasih!

Jadi cara menggunakan pipa pada komponennya seperti ini:

let name = new UserNamePipe().transform(user);

Tautkan ke pertanyaan serupa lainnya.


3
Ini berfungsi, tetapi mungkin tidak mengikuti praktik terbaik / pola pilihan Angular. Meneruskan pipa ke konstruktor sebagai ketergantungan komponen, seperti yang ditunjukkan dalam jawaban lain, adalah "lebih benar".
Josh

apakah tidak ada masalah kinerja menggunakan cara ini? beberapa orang mungkin menggunakannya sepanjang waktu!
Mohammad Kermani

2
Ini adalah cara yang benar-benar salah dalam menggunakan pipa. Pipa adalah kelas tujuan khusus dan harus digunakan melalui sarana khusus yang disediakan oleh Angular. Jika Anda memerlukan beberapa fungsionalitas yang diimplementasikan dalam sebuah pipa, tetapi dengan cara menggunakannya seperti kelas TypeScript biasa, maka Anda harus membuat regularkelas itu dan menggunakannya dalam kode TS Anda ( your-component.ts, misalnya). Jika Anda membutuhkan fungsionalitas yang sama di pipa, Anda selalu bisa menggunakan regularkelas itu dari pipa juga.
Alexander Abakumov

Perbedaan terbesar adalah Anda membuat lebih banyak instance kelas dengan cara ini. Dengan menggunakan sintaks Angular itu berperilaku seperti singelton dan hanya dipakai sekali.
Sir2B
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.