কৌণিক - পরিষেবা এবং উপাদানগুলিতে পাইপ ব্যবহার করুন

Question

অ্যাঙ্গুলারজেএস-এ, আমি এর অনুরূপ সিনট্যাক্স ব্যবহার করে পরিষেবা এবং নিয়ন্ত্রণকারীদের ভিতরে ফিল্টার (পাইপ) ব্যবহার করতে সক্ষম হয়েছি:

$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,...]

কৌণিক 6 আপডেট করুন : কৌণিক 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কোনও সমস্যা এড়াতে আপনার প্রকল্পে পলিফিল যুক্ত করা উচিত । আরও বিস্তারিত উত্তরের জন্য এই সম্পর্কিত প্রশ্নটি দেখুন ।

Comments

যে ব্রাউজারটি ইন্টেল সমর্থন করে না তাতে ডেট পাইপ ব্যবহারের ফলাফল কী হবে? সহায়তার অভাব মোকাবেলায় কি কোনও ধরণের শিম / প্লাইফিল পাওয়া যায়?

— পসিক্স-অনুগত

এটি দু: খজনকভাবে একটি ত্রুটি ফেলবে এবং এখনই আপনার অ্যাপ্লিকেশনটিকে ভেঙে দেবে। গিথুব ট্র্যাকারে সমস্যাগুলি খোলা আছে, তবে দেখে মনে হচ্ছে বর্তমানে কোনও ভাল পলফিল নেই ...

— cexbrayat

এটি কাস্টম পাইপগুলির জন্য কাজ করে বলে মনে হয় না যা তারা নিজের নির্মাতায় নির্ভরতা ইনজেকশন ব্যবহার করে। নাকি আমি ভুল করছি?

— মারে স্মিথ

@ জায়েসেস "অ্যাঙ্গুলার 2 / সাধারণ" তে রয়েছে।

— valter.santos.matos

@ জায়েসেস আমদানি করুন এবং উপাদান সরবরাহকারী বিভাগগুলিতে যুক্ত করুন: '@ কৌনিক / সাধারণ' থেকে `` `আমদানি {ডেট পাইপ;; @ কম্পোনেন্ট ({... সরবরাহকারী: [..., তারিখ পাইপ]}) `` `

— অ্যালেক্স লার্ক

Answer 2

এই উত্তরটি এখন পুরানো

এই পদ্ধতির পরিবর্তে অন্যান্য উত্তর থেকে ডিআই পদ্ধতির ব্যবহারের পরামর্শ দিন

আসল উত্তর:

আপনার সরাসরি ক্লাস ব্যবহার করতে সক্ষম হওয়া উচিত

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 / সাধারণ' থেকে আমদানি করা হয়।

— পসিক্স-অনুগত

কোড স্নিপেটটি কম্পাইল করে না .... error TS2345: Argument of type 'string[]' is not assignable to parameter of type 'string'. লাইনেvar formatted = new DatePipe().transform(raw, ['yyyy-MM-dd']);

— পল গর্বাস

এখন অ্যাঙ্গুলার ভি 2.0.0 প্রকাশ হয়েছে এবং আপনি এই পাইপটি ইনজেক্ট করতে পারেন। প্রথমে এনজিডমুলেলে যুক্ত করুন: @NgModule({ providers:[DatePipe] })তারপরে আপনার ক্লাসে, আমদানি করুন এবং ইনজেকশন করুন constructor( private datePipe: DatePipe ){}

— ktretyak

ইতোমধ্যে অ্যাঙ্গুলার 2 ডেটপাইপ লোকাল_আইডি কনস্ট্রাক্টর আর্গুমেন্ট হিসাবে প্রত্যাশা করে। সুতরাং আপনি যদি এটি সরাসরি ব্যবহার করার চেষ্টা করেন তবে আপনাকে একটি ঠিক লোকাল_আইডি সরবরাহ করতে হবে এবং এর ফলে এটি অ্যাপলিকেশন লোকাল_আইডি আর নেবে না। সে কারণেই আমি সে পথে যাওয়ার পরামর্শ দিচ্ছি না।

— ই হেইন

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

এটি কোনও উপাদান বা পরিষেবাতে পাইপগুলি কীভাবে ব্যবহার করবেন সে প্রশ্নের উত্তর দেয় না।

— পসিএক্স-

আপনি কীভাবে পাইপগুলি তৈরি করবেন সে সম্পর্কে তথ্য অন্তর্ভুক্ত না করার জন্য যদি আপনি উত্তরটি আপডেট করেন তবে আমি আমার ডাউনভোটটি সরিয়ে দেব। এগুলি কীভাবে তৈরি করা যায় তার সাথে প্রশ্নের কোনও সম্পর্ক নেই।

— পজিক্স-অনুগত 21

@ পসিক্স-অনুবর্তী হিসাবে আমি আমার উত্তরে উল্লেখ করেছি যে এটি কাস্টম পাইপ ব্যবহার করে খুব সহজেই পুনরায় ব্যবহার এবং আপডেট করতে পারে। এটি অন্য কারও কাছে পূর্ণ সাহায্য করতে পারে। ভোট গৌণ হয়।

— প্রশোভ

এটি একটি ন্যায্য বিষয় যদিও আমি এখনও মনে করি এটি অন্তত এই নির্দিষ্ট প্রশ্নের উত্তর দেয় এমন অংশ থাকতে হবে তা বোধগম্য। ভোট সরিয়ে ফেলা হচ্ছে। উত্তর এবং উত্তর দেওয়ার জন্য ধন্যবাদ।

— পসিএক্স-অনুগত 19

কেন আপনি "এন-ইউএস" হার্ডকোড করলেন? আপনার কি কোনওভাবে ইনজেকশন করা উচিত নয়?

— ঘেরম্যান

Answer 4

অন্যান্য উত্তর কৌনিক 5 এ কাজ করে না?

আমি একটি ত্রুটি পেয়েছি কারণ ডেট পাইপ সরবরাহকারী নয়, তাই এটি ইনজেকশন দেওয়া যায় না। একটি সমাধান হ'ল এটি আপনার অ্যাপ্লিকেশন মডিউলে সরবরাহকারী হিসাবে রাখা তবে আমার পছন্দের সমাধানটি তা ইনস্ট্যান্ট করা।

যেখানে প্রয়োজন সেখানে এটি ইনস্ট্যান্ট করুন:

এটি লোকাল কীভাবে পেয়েছে তা দেখতে আমি ডেটপাইপের উত্স কোডটি দেখেছিলাম: https://github.com/angular/angular/blob/5.2.5/packages/common/src/pines/date_pipe.ts#L15-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')
    }
}

এখানে কীটি ইনজুলার এবং LOCALE_ID কৌনিক মূল থেকে আমদানি করছে এবং তারপরে ইনজেকশন দিচ্ছে যাতে আপনি এটি ডেটপাইপকে সঠিকভাবে ইনস্ট্যান্ট করতে দিতে পারেন।

ডেট পাইপকে সরবরাহকারী করুন

আপনার অ্যাপ্লিকেশন মডিউলে আপনি এইভাবে আপনার সরবরাহকারী অ্যারেতে ডেট পাইপ যুক্ত করতে পারেন:

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

@NgModule({
    providers: [
        DatePipe
    ]
})

এখন আপনি এটি আপনার নির্মাতাকে যেখানে প্রয়োজন সেখানে ইনজেকশন করতে পারেন (যেমন সেক্সব্রায়াতের উত্তরে)।

সারসংক্ষেপ:

উভয়ই সমাধান কাজ করেছে, আমি জানি না কোন কোন কৌণিক সর্বাধিক "সঠিক" বিবেচনা করবে তবে কৌণিক নিজেই সরবরাহকারীর হিসাবে ডেটপাইপ সরবরাহ না করায় আমি নিজেই এটি ইনস্ট্যান্ট করতে পছন্দ করেছি।

Comments

আপনি এটিকে উপাদান উপাদান হিসাবেও তৈরি করতে পারেন

— জিমি কেন

ধন্যবাদ, আপনার উত্তরটি সর্বাধিক বিস্তৃত। আমি পাইপটি নতুন বা নির্ভরতার সাথে সরাসরি ইনজেকশনের মাধ্যমে এটি সরবরাহ করার এবং এটি সরবরাহকারীদের সাথে যুক্ত করার মধ্যে পার্থক্যের জন্য কিছু সংস্থান খুঁজছি এবং কিছুই খুঁজে পাচ্ছি না। আমি ২ য় পন্থা পছন্দ করি, কারণ যখন আপনি newপাইপ আপ করবেন তখন আপনার লোকালটি ডিআই করতে হবে। পুরো @Inject(LOCALE_ID) private locale: stringসিনট্যাক্সটি আমার কাছে জটিল মনে হচ্ছে।

— কোডেপিক

@ কোডেপিক আমি সম্ভবত এটি বলব না যে সত্যিই এখানে একটি বিশাল পার্থক্য রয়েছে। আপনি যদি আমাকে জিজ্ঞাসা করেন, কৌণিক সম্ভবত এটি সরবরাহকারী করা উচিত ছিল।

— csga5000

Answer 5

আপনি যদি আপনার উপাদানগুলিতে আপনার কাস্টম পাইপটি ব্যবহার করতে চান তবে আপনি যুক্ত করতে পারেন

@Injectable({
  providedIn: 'root'
})

আপনার কাস্টম পাইপতে টিকা। তারপরে, আপনি এটি পরিষেবা হিসাবে ব্যবহার করতে পারেন

Comments

এটা আছে ভাল providedIn: 'root'আমাদের নল ভিতরে বা স্থানীয় মডিউল যেখানে পাইপ ব্যবহার করা হয় প্রদান করা?

— ড্যানিয়েল.ভি

আপনি পাইপটি কোথায় ব্যবহার করেন তা নির্ভর করে depends আপনি যদি কেবলমাত্র একটি মডিউলে পাইপ ব্যবহার করেন তবে আপনি দ্বিতীয় বিকল্পটি নির্বাচন করতে পারেন। তবে আপনি যদি নিজের অ্যাপ্লিকেশনে কয়েকটি মডিউলগুলিতে পাইপ ব্যবহার করেন তবে আপনার দেওয়া প্রথম বিকল্পটি নির্বাচন করা উচিত যা সরবরাহ করা হয়েছে: 'রুট'

— srt

Answer 6

আপনি যদি 'নতুন মাইপাইপ ()' না করতে চান কারণ আপনি পাইপের উপর নির্ভরতা ইনজেকশন দিচ্ছেন, আপনি সরবরাহকারীর মতো উপাদান ইনজেকশন করতে পারেন এবং নতুন ছাড়া ব্যবহার করতে পারেন।

উদাহরণ:

// 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

আপনি পরিষেবাগুলিতে বা উপাদান টিএস-তে তারিখের বিন্যাস করতে ফর্ম্যাটডেট () ব্যবহার করতে পারেন। বাক্য গঠন:-

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

এর মতো সাধারণ মডিউল থেকে ফর্ম্যাটডেট () আমদানি করুন,

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

এবং ক্লাসে এটি এর মতো ব্যবহার করুন,

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

আপনি এর মতো কৌণিক দ্বারা সরবরাহিত পূর্বনির্ধারিত ফর্ম্যাট বিকল্পগুলিও ব্যবহার করতে পারেন,

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

আপনি এখানে অন্য সমস্ত পূর্বনির্ধারিত ফর্ম্যাট বিকল্প দেখতে পারেন,

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