कोणीय - सेवाओं और घटकों में पाइप का उपयोग करें

Question

AngularJS में, मैं इसके समान सिंटैक्स का उपयोग करते हुए सेवाओं और नियंत्रकों के अंदर फिल्टर (पाइप) का उपयोग करने में सक्षम हूं:

$filter('date')(myDate, 'yyyy-MM-dd');

क्या एंगुलर में सेवाओं / घटकों में पाइप का उपयोग करना संभव है?

Comments

कोणीय 8 के लिए इस ट्यूटोरियल निर्मित में और कस्टम पाइपों पर चेक freakyjolly.com/angular-8-pipes-all-type-of-pipes-with-examples

— संहिता जासूस

Answer 1

हमेशा की तरह कोणीय में, आप निर्भरता इंजेक्शन पर भरोसा कर सकते हैं:

import { DatePipe } from '@angular/common';

class MyService {

  constructor(private datePipe: DatePipe) {}

  transformDate(date) {
    return this.datePipe.transform(date, 'yyyy-MM-dd');
  }
}

DatePipeअपने मॉड्यूल में अपने प्रदाताओं की सूची में जोड़ें ; यदि आप ऐसा करना भूल जाते हैं तो आपको एक त्रुटि मिलेगी no provider for DatePipe:

providers: [DatePipe,...]

Angular 6 को अपडेट करें : Angular 6 अब पाइप द्वारा सार्वजनिक रूप से उपयोग किए जाने वाले प्रत्येक प्रारूपण को बहुत अधिक प्रदान करता है। उदाहरण के लिए, अब आप formatDateसीधे फ़ंक्शन का उपयोग कर सकते हैं ।

import { formatDate } from '@angular/common';

class MyService {

  constructor(@Inject(LOCALE_ID) private locale: string) {}

  transformDate(date) {
    return formatDate(date, 'yyyy-MM-dd', this.locale);
  }
}

कोणीय 5 से पहले : हालांकि चेतावनी दी गई थी कि DatePipeसंस्करण 5 तक Intl एपीआई पर निर्भर था, जो सभी ब्राउज़रों द्वारा समर्थित नहीं है ( संगतता तालिका की जांच करें )।

यदि आप पुराने कोणीय संस्करणों का उपयोग कर रहे हैं, तो आपको Intlकिसी भी समस्या से बचने के लिए अपने प्रोजेक्ट में पॉलीफ़िल को जोड़ना चाहिए । अधिक विस्तृत उत्तर के लिए इस संबंधित प्रश्न को देखें ।

Comments

एक ब्राउज़र में DatePipe का उपयोग करने का परिणाम क्या होगा जो Intl का समर्थन नहीं करता है? क्या समर्थन की कमी का सामना करने के लिए किसी प्रकार का शिम / पाइलफ़िल उपलब्ध है?

— पोसिक्स-आज्ञाकारी

यह दुखद रूप से एक त्रुटि फेंक देगा और अभी आपके ऐप को तोड़ देगा। गितुब ट्रैकर पर खुलने वाले मुद्दे हैं, लेकिन ऐसा लगता है कि वर्तमान में कोई अच्छा

— पॉलीफ़िल

यह कस्टम पाइप के लिए काम नहीं करता है जो स्वयं अपने कंस्ट्रक्टर में निर्भरता इंजेक्शन का उपयोग करते हैं। या मैं गलत हूँ?

— मरे स्मिथ

@JayChase "कोणीय 2 / आम" में है।

— valter.santos.matos

@JayChase आयात और घटक प्रदाता अनुभागों में जोड़ें: `` आयात {DatePipe} से '@ कोणीय / आम'; @Component ({... प्रोवाइडर्स: [..., डेटपाइप]}) `` `

— alx लार्क

Answer 2

यह उत्तर अब पुराना हो चुका है

इस दृष्टिकोण के बजाय अन्य उत्तरों से DI दृष्टिकोण का उपयोग करने की सलाह देते हैं

मूल उत्तर:

आपको सीधे कक्षा का उपयोग करने में सक्षम होना चाहिए

new DatePipe().transform(myDate, 'yyyy-MM-dd');

उदाहरण के लिए

var raw = new Date(2015, 1, 12);
var formatted = new DatePipe().transform(raw, 'yyyy-MM-dd');
expect(formatted).toEqual('2015-02-12');

Comments

जावास्क्रिप्ट Dateकंस्ट्रक्टर का उपयोग करते समय , महीने 0आधारित होते हैं । तो 0जनवरी है और 1फरवरी है। सही गायबy

— SnareChops

यह किसी और की मदद करता है, डेट पाइप 'कोणीय 2 / आम' से आयात किया जाता है।

— POSIX- आज्ञाकारी

कोड स्निपेट संकलन नहीं करता है .... error TS2345: Argument of type 'string[]' is not assignable to parameter of type 'string'. लाइन परvar formatted = new DatePipe().transform(raw, ['yyyy-MM-dd']);

— पॉल गोर्बस

अब जारी किया गया कोणीय v2.0.0, और आप इस पाइप को इंजेक्ट कर सकते हैं। सबसे पहले, NgModule में जोड़ें: @NgModule({ providers:[DatePipe] })फिर अपनी कक्षा में, आयात और इंजेक्शन constructor( private datePipe: DatePipe ){}

— ktretyak

इस बीच Angular2 DatePipe लोकेले_आईडी को कंस्ट्रक्टर के तर्क के रूप में उम्मीद करता है। इसलिए यदि आप इसे सीधे उपयोग करने का प्रयास करते हैं, तो आपको एक स्थान Locale_ID प्रदान करना होगा और इसके बाद यह Locale_ID एप्लिकेशन नहीं लेगा। इसलिए मैं उस रास्ते पर जाने की सलाह नहीं दूंगा।

— ई। हेन

Answer 3

हाँ, यह एक साधारण कस्टम पाइप का उपयोग करके संभव है। कस्टम पाइप का उपयोग करने का लाभ अगर हमें भविष्य में तारीख प्रारूप को अपडेट करने की आवश्यकता होती है, तो हम एक फ़ाइल में जाकर अपडेट कर सकते हैं।

import { Pipe, PipeTransform } from '@angular/core';
import { DatePipe } from '@angular/common';

@Pipe({
    name: 'dateFormatPipe',
})
export class dateFormatPipe implements PipeTransform {
    transform(value: string) {
       var datePipe = new DatePipe("en-US");
        value = datePipe.transform(value, 'MMM-dd-yyyy');
        return value;
    }
}

{{currentDate | dateFormatPipe }}

आप हमेशा इस पाइप का उपयोग कहीं भी, घटक, सेवाओं आदि में कर सकते हैं

उदाहरण के लिए

export class AppComponent {
  currentDate : any;
  newDate : any;
  constructor(){
    this.currentDate = new Date().getTime();
    let dateFormatPipeFilter = new dateFormatPipe();
    this.newDate = dateFormatPipeFilter.transform(this.currentDate);
    console.log(this.newDate);
}

निर्भरता आयात करना मत भूलना।

import { Component } from '@angular/core';
import {dateFormatPipe} from './pipes'

कस्टम पाइप उदाहरण और अधिक जानकारी

Comments

यह एक घटक या सेवा में पाइप का उपयोग करने के सवाल का जवाब नहीं देता है।

— POSIX- आज्ञाकारी

यदि आप पाइप बनाने के तरीके के बारे में जानकारी शामिल नहीं करने के लिए अपने जवाब को अपडेट करेंगे तो मैं अपना डाउनवोट हटा दूंगा। सवाल यह नहीं है कि उन्हें कैसे बनाया जाए।

— POSIX- आज्ञाकारी

@ POSIX- अनुपालन जैसा कि मैंने अपने उत्तर में उल्लेख किया है कि यह कस्टम पाइप का उपयोग करके पुन: उपयोग कर सकता है और बहुत आसानी से अपडेट कर सकता है। यह किसी और की पूरी मदद कर सकता है। वोट गौण हैं।

— प्रशाभ

यह एक उचित बिंदु है, हालांकि मुझे अभी भी लगता है कि कम से कम यह समझ में आता है कि इस विशिष्ट प्रश्न का उत्तर पहले है। वोट निकाल रहा है। उत्तर और उत्तर देने के लिए धन्यवाद।

— पोसिक्स-आज्ञाकारी

आपने "एन-यूएस" हार्डकोड क्यों दिया? क्या आपको किसी तरह इंजेक्शन नहीं लगाना चाहिए?

— घुमारवीं

Answer 4

अन्य उत्तर कोणीय 5 में काम नहीं करते हैं?

मुझे एक त्रुटि मिली क्योंकि DatePipe प्रदाता नहीं है, इसलिए इसे इंजेक्ट नहीं किया जा सकता है। एक समाधान यह है कि इसे अपने ऐप मॉड्यूल में एक प्रदाता के रूप में रखा जाए, लेकिन मेरा पसंदीदा समाधान इसे तुरंत करना था।

जहां जरूरत हो, वहां तत्काल करें:

मैंने DatePipe के सोर्स कोड को देखा कि कैसे उसे लोकेल मिला: https://github.com/angular/angular/blob/5.2.5/packages/common/src/pipes/date_pipe.ts#15-L174

मैं इसे एक पाइप के भीतर उपयोग करना चाहता था, इसलिए मेरा उदाहरण एक अन्य पाइप के भीतर है:

import { Pipe, PipeTransform, Inject, LOCALE_ID } from '@angular/core';
import { DatePipe } from '@angular/common';

@Pipe({
    name: 'when',
})
export class WhenPipe implements PipeTransform {
    static today = new Date((new Date).toDateString().split(' ').slice(1).join(' '));
    datePipe: DatePipe;

    constructor(@Inject(LOCALE_ID) private locale: string) {
        this.datePipe = new DatePipe(locale);
    }
    transform(value: string | Date): string {
        if (typeof(value) === 'string')
            value = new Date(value);

        return this.datePipe.transform(value, value < WhenPipe.today ? 'MMM d': 'shortTime')
    }
}

यहाँ कुंजी Inject, और LOCALE_ID को कोणीय के मूल से आयात कर रही है, और फिर इसे इंजेक्ट कर रही है ताकि आप इसे ठीक से इंस्टेंट करने के लिए DatePipe को दे सकें।

DatePipe को एक प्रदाता बनाएं

अपने ऐप मॉड्यूल में आप अपने प्रदाताओं को इस तरह से DatePipe भी जोड़ सकते हैं:

import { DatePipe } from '@angular/common';

@NgModule({
    providers: [
        DatePipe
    ]
})

अब आप इसे केवल अपने कंस्ट्रक्टर में इंजेक्ट कर सकते हैं, जहां जरूरत है (जैसे कि cexbrayat के उत्तर में)।

सारांश:

या तो समाधान काम किया है, मुझे नहीं पता कि कौन सा कोणीय सबसे "सही" पर विचार करेगा, लेकिन मैंने इसे मैन्युअल रूप से तुरंत चुनना चुना क्योंकि कोणीय खुद को एक प्रदाता के रूप में डेटपाइप प्रदान नहीं करता है।

Comments

आप इसे प्रति घटक प्रदाता भी बना सकते हैं

— जिमी केन

धन्यवाद, आपका उत्तर सबसे अधिक संपूर्ण है। मैं नए या निर्भरता वाले पाइप को तुरंत इंजेक्ट करने और इसे प्रदाताओं से जोड़ने और इसे कुछ भी नहीं पा सकने के बीच अंतर पर कुछ संसाधनों की तलाश कर रहा हूं। मैं 2 दृष्टिकोण पसंद करता हूं, जब आप newपाइप को ऊपर उठाते हैं, तो आपको अभी भी लोकेल को डीआई करना होगा। मुझे पूरा @Inject(LOCALE_ID) private locale: stringवाक्य रचना बोझिल लगता है ।

— कोडेपिक

@codeepic मैं शायद यह नहीं कहूंगा कि वास्तव में बहुत बड़ा अंतर है। यदि आप मुझसे पूछते हैं, तो कोणीय को संभवतः इसे एक प्रदाता बनाना चाहिए था।

— csga5000

Answer 5

यदि आप अपने घटकों में अपने कस्टम पाइप का उपयोग करना चाहते हैं, तो आप जोड़ सकते हैं

@Injectable({
  providedIn: 'root'
})

अपने कस्टम पाइप के लिए एनोटेशन। फिर, आप इसे सेवा के रूप में उपयोग कर सकते हैं

Comments

क्या providedIn: 'root'हमारे पाइप के अंदर होना अच्छा है या एक स्थानीय मॉड्यूल में प्रदान किया जाता है जहां पाइप का उपयोग किया जाता है?

— डैनियल। वी।

यह निर्भर करता है कि आप पाइप का उपयोग कहां करते हैं। यदि आप केवल एक मॉड्यूल में पाइप का उपयोग करते हैं तो आप दूसरे विकल्प का चयन कर सकते हैं। लेकिन अगर आप अपने ऐप में कई मॉड्यूल में पाइप का उपयोग करते हैं, तो आपको पहला विकल्प चुनना चाहिए जो प्रदान किया गया है: 'रूट'

— srt

Answer 6

यदि आप 'नया myPipe ()' नहीं करना चाहते हैं, क्योंकि आप पाइप पर निर्भरता का इंजेक्शन लगा रहे हैं, तो आप प्रदाता जैसे घटक में इंजेक्शन लगा सकते हैं और नए उपयोग कर सकते हैं।

उदाहरण:

// In your component...

import { Component, OnInit } from '@angular/core';
import { myPipe} from './pipes';

@Component({
  selector: 'my-component',
  template: '{{ data }}',
  providers: [ myPipe ]
})
export class MyComponent() implements OnInit {
  data = 'some data';
  constructor(private myPipe: myPipe) {}

  ngOnInit() {
    this.data = this.myPipe.transform(this.data);
  }
}

Answer 7

कोणीय 6 के रूप में आप formatDateसे आयात कर सकते हैं@angular/common घटकों के अंदर उपयोग करने के लिए उपयोगिता हैं।

इसे https://github.com/smdunn/angular/commit/3adeb0d96344c15201f7f1a0fae7e533a408e4ae पर देखा गया था

मैं के रूप में इस्तेमाल किया जा सकता है:

import {formatDate} from '@angular/common';
formatDate(new Date(), 'd MMM yy HH:mm', 'en');

हालांकि लोकेल की आपूर्ति की जानी है

Answer 8

आप सेवाओं या घटक ts में दिनांक को प्रारूपित करने के लिए formatDate () का उपयोग कर सकते हैं। वाक्य - विन्यास:-

formatDate(value: string | number | Date, format: string, locale: string, timezone?: string): string

इस तरह से सामान्य मॉड्यूल से formatDate () आयात करें,

import { formatDate } from '@angular/common';

और इसे कक्षा में इस तरह से उपयोग करें,

formatDate(new Date(), 'MMMM dd yyyy', 'en');

आप इस तरह कोणीय द्वारा प्रदान किए गए पूर्वनिर्धारित प्रारूप विकल्पों का भी उपयोग कर सकते हैं,

formatDate(new Date(), 'shortDate', 'en');

आप यहां अन्य सभी पूर्वनिर्धारित प्रारूप विकल्प देख सकते हैं,

https://angular.io/api/common/DatePipe