কৌণিক 9 এ কীভাবে কাস্টম পাইপ তৈরি করবেন তা প্রদর্শন করে একটি ধাপে ধাপে উদাহরণ

কৌণিক পাইপ, এইচটিএমএলে ঘোষণা করা যায় এমন ডিসপ্লে-মান ট্রান্সফর্মেশনগুলি লেখার একটি উপায় write

কৌণিক কাঠামো বিল্ট-ইন পাইপগুলির একটি অ্যারে সরবরাহ করে যা আপনার অ্যাপ্লিকেশনটিতে উপকৃত হতে পারে। নিম্নলিখিত [লিঙ্ক] উপলব্ধ বিভিন্ন পাইপ হাইলাইট করা API ডকুমেন্টেশনের একটি উল্লেখ।

আমরা সকলেই জানি যে সমস্ত ওয়েব অ্যাপ্লিকেশন সমানভাবে তৈরি হয় না এবং কিছু ক্ষেত্রে আপনি বর্তমানে কৌণিক কাঠামোর দ্বারা সরবরাহ করা হয়নি এমন তথ্য প্রদর্শন করার সময় নিজেকে একটি কাস্টম রূপান্তর প্রয়োজন বলে মনে করেন। তোমার কি করা উচিত?

ভাল এই সমস্যাটি সহজেই পুনঃব্যবহারযোগ্য কাস্টম পাইপ তৈরি করে সমাধান করা যেতে পারে যা আপনি @NgModule ঘোষণায় এটি যুক্ত করে আপনার অ্যাপ্লিকেশনটিতে নিবন্ধভুক্ত করবেন। তারপরে আপনি যেখানে প্রয়োজন সেখানে এটি উল্লেখ করতে সক্ষম হবেন।

এই টিউটোরিয়ালে আমি আপনাকে নিম্নলিখিত ধাপগুলি অনুসরণ করব:

  • একটি কাস্টম পাইপ তৈরি করুন
  • কাস্টম পাইপ নিবন্ধন করুন
  • নতুন তৈরি পাইপ ব্যবহার করুন

এটি প্রদর্শনের জন্য আমরা একটি পাইপ তৈরি করব যা নিম্নলিখিত গাণিতিক রূপান্তরটি ব্যবহার করে মাইলকে কিলোমিটারে রূপান্তর / রূপান্তর করবে:

একটি মাইলে 1.609344 কিলোমিটার রয়েছে। মাইলকে কিলোমিটারে রূপান্তর করতে, মাইলের মানটি 1.609344 দিয়ে গুণ করুন।
রূপান্তর সূত্র: d (মাইল) = ডি (কিমি) / 1.609344
উদাহরণ: দূরত্ব (মাইল) = 5 (কিমি) / 1.6093 = 3.11 মাইল

1 - কাস্টম পাইপ তৈরি করুন

এখন আসুন টাইপ স্ক্রিপ্ট ফাইলটি তৈরি করুন যা আমাদের কাস্টম পাইপের কোড ধারণ করবে। আপনার কৌণিক প্রকল্পে, ভিএসকোডে নিম্নলিখিত কমান্ডটি টাইপ করুন:> এনজি জিপি। / কাস্টম- পাইপস / কিলোমিটার টোমাইলস

এই কমান্ডটি নিম্নলিখিত ফাইলের কাঠামোটিতে দুটি ফাইল উত্পন্ন করবে: অ্যাপ> কাস্টম-পাইপ।

  • কিলোমিটার টু miles.pipe.spec.ts
  • কিলোমিটার টু miles.pipe.ts

অতিরিক্তভাবে, এই কমান্ডটি অ্যাপ্লিকেশন.মডিউল.টস ফাইলটিতে @NgModule ঘোষণায় সদ্য নির্মিত কাস্টম পাইপটিকে নিবন্ধিত / যুক্ত করবে।

এখন যেহেতু কাস্টম পাইপ ফাইল তৈরি করা হয়েছে, রূপান্তর ক্রিয়াকলাপ সম্পাদন করার জন্য আমাদের কোডটি প্রয়োগ করতে হবে। কিলোমিটার থেকে মাইল.পাই.পি. ফাইলগুলি খুলুন এবং নিম্নলিখিত কোডটি যুক্ত করুন:

রূপান্তর (মান: সংখ্যা): সংখ্যা {কিলোমিটার কিলোমিটার ইনমাইল = 1.609344; যদি (! isNaN (মান)) {ফেরতের মান / কিলোমিটারআইনমাইল; } রিটার্ন নাল; }

কিলোমিটার থেকে মাইল. পাইপ.পেটগুলি এখন দেখতে এইরকম হওয়া উচিত:

এই সময়ে আমরা কাস্টম পাইপ তৈরি করেছি এবং এটি ব্যবহারের জন্য প্রস্তুত।

2 - কাস্টম পাইপটি কীভাবে ব্যবহার / রেফারেন্স করবেন

আপনার প্রকল্পে, একটি উপাদান html ফাইল খুলুন যেখানে আপনি এই কাস্টম পাইপটি ব্যবহার করতে চান এবং নিম্নলিখিত এক্সপ্রেশনটি যুক্ত করুন:

{{5 | কিলোমিটার টোমাইলস}}

এই অভিব্যক্তিটিতে আমরা কৌণিক বলছি যে পাইপটি মাইল থেকে রূপান্তর করতে কিলোমিটারের 5 মানের উপরে আমরা প্রয়োগ করতে চাই।

পরিবর্তনটি দেখতে, আপনার ভিএসকোড টার্মিনালে আপনার প্রকল্পটি সংকলন করতে এবং পরিচালনা করতে নিম্নলিখিত কমান্ডটিতে টাইপ করুন:> এনজি সার্ভিস -o

কোডটি সংকলিত হয়ে গেলে, আপনার প্রকল্পটি একটি ব্রাউজারে আরম্ভ হবে এবং আপনার নিম্নলিখিতগুলি দেখতে হবে:

আপনি যা দেখতে পাবেন তা হ'ল এইচটিএমএল ফাইলটিতে আপনি হার্ড কোডিং করেছেন এমন মান 5 হ'ল মাইল রূপান্তরিত / রূপান্তরিত।

3 - একটি উপাদান.ts ফাইলের মধ্যে কাস্টম পাইপটি কীভাবে ব্যবহার করবেন

এখন যেহেতু আমরা জানি যে কীভাবে একটি উপাদান html ফাইলে সদ্য নির্মিত পাইপটি ব্যবহার করতে হয়, একটি উপাদান.ts ফাইলের মধ্যে এটি সঠিকভাবে ব্যবহার করার পদক্ষেপগুলি কী? এটা কি সম্ভব?

উত্তরটি হল হ্যাঁ. কোনও উপাদানটির অভ্যন্তরে নতুন কাস্টম পাইপ বা কৌনিক অন্তর্নির্মিত পাইপটি ব্যবহার করার জন্য আমাদের অবশ্যই কন্সট্রাক্টরে কাঙ্ক্ষিত পাইপটি ইনজেকশন করতে হবে এবং এটি উপাদান সংযোজকটিতে অ্যারে সরবরাহকারীগুলিতে যুক্ত করতে হবে।

এটি কীভাবে অর্জন করা যায় তা এখানে। আপনি যে উপাদানটি ব্যবহার করতে চান সেই উপাদানটি.এনটি ফাইলটি খুলুন এবং @ কম্পোনেন্ট ডেকরেটারে সরবরাহকারীর তালিকায় কাস্টম পাইপ যুক্ত করুন।

এর পরে, কম্পোনেন্ট.টিস ফাইলটিতে একটি কনস্ট্রাক্টর যুক্ত করা যাক যদি এর মধ্যে ইতিমধ্যে একটি না থাকে। কনস্ট্রাক্টরের ভিতরে প্যারামিটার হিসাবে কাস্টম পাইপ যুক্ত করা যাক:

এই মুহুর্তে, আমরা কৌণিককে বলেছি যে আমাদের উপাদান.ts এর কিলোমিটার টোমাইলস পাইপের একটি উদাহরণ থাকবে এবং আমরা এটি কনস্ট্রাক্টরের মাধ্যমে ইনজেকশন দিয়েছি।

কোডটিতে পাইপটি ব্যবহার করার জন্য এই মুহুর্তে আপনাকে যা করতে হবে তা হল নিম্নলিখিত ফাংশন কলটি করতে হবে:

this.convertToMiles.transform (x) এর;
দ্রষ্টব্য: x হ'ল কিলোমিটারের দূরত্ব যা আপনি মাইলগুলিতে রূপান্তর করতে চেষ্টা করছেন।

নীচের অংশে.টোগুলির ভিতরে পুরো কোডের একটি স্ক্রিন শট দেওয়া আছে যাতে দেখা যায় যে সদ্য নির্মিত কাস্টম পাইপটিকে কীভাবে কল করতে হবে demonst

ইউআইতে রূপান্তরটি প্রদর্শনের জন্য, উপাদান html ফাইলটি খুলুন এবং কেবলমাত্র শ্রেণীর ভেরিয়েবল যুক্ত করুন যাতে রূপান্তরিত মানটি একটি অভিব্যক্তি হিসাবে যুক্ত করে:

{{দূরত্বআইনমাইলস}

আপনার কোডটি সংকলন করুন এবং চালনা করুন এবং আপনি লক্ষ্য করবেন যে রূপান্তরটি সফল হয়েছিল।

3 - উপসংহার

এই টিউটোরিয়ালে আমরা শিখেছি কীভাবে একটি কাস্টম পাইপ তৈরি করতে হয় এবং এটি আমাদের এইচটিএমএল এবং .ts কোডের অভ্যন্তরে রেফারেন্স করতে হয়। যদিও এটি একটি ভার্ট সরল উদাহরণ ছিল তবে আরও জটিল তৈরি করার সময় পাইপ তৈরির জন্য মৌলিক পরিবর্তন হয় না।

এখন যেহেতু আপনি কীভাবে একটি কাস্টম পাইপ তৈরি করতে জানেন, আপনি কী তৈরি করতে পারবেন তা দেখার জন্য আগ্রহী হবে। আমি আশা করি এই টিউটোরিয়ালটি সহায়ক এবং উপকারী ছিল।

আরো দেখুন

ওয়ার্ডপ্রেসে হোম পেজ হিসাবে আমি কীভাবে কাস্টম এইচটিএমএল পৃষ্ঠা যুক্ত করব? আমি কীভাবে আমার পোর্টফোলিও তৈরি করতে আমার ওয়েব ডিজাইন সংস্থার ক্লায়েন্ট পেতে পারি? আমি নিজেকে এইচটিএমএল 5 দিয়ে ওয়েব কোডিং শেখানো শুরু করেছি begun কোনও গুরুতর ক্লায়েন্ট গ্রহণের আগে আমার আর কতক্ষণ শেখা উচিত? অনলাইনে পাওয়ারপয়েন্ট উপস্থাপনা কীভাবে বিক্রয় করবেনআমি কীভাবে একটি ওয়েবসাইট কাঠামো তৈরি করতে পারি? ওয়েবসাইট কাঠামো তৈরির প্রক্রিয়া কী?কিভাবে ইউক্রেন থেকে মার্কিন যুক্তরাষ্ট্রে বন্ধু আমন্ত্রণ জানাতে হয়কিভাবে একটি কোট তৈরি করতে পারেনকীভাবে ফেসবুকের ছবিগুলি একটি অ্যালবামে স্থানান্তরিত করতে হয়