গতিশীলভাবে তৈরি উপাদানগুলিতে ডেটা পাস করতে কৌণিক @ইনপুট কীভাবে ব্যবহার করবেন

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

এটা অনেক ভালো হবে যদি আমরা শুধু @Input ডেকোরেটর ব্যবহার করতে পারি যেমনটা আমরা অভ্যস্ত। আচ্ছা, অনুমান কি? কৌণিক ষোল সংস্করণ হিসাবে এই সঠিক জিনিসটি সমর্থন করে। এই পোস্টে, আমি আপনাকে দেখাব কিভাবে. ঠিক আছে, চলুন এটা পেতে.

কৌণিক ইনজেক্টর ব্যবহার করে পুরানো উপায়ে ডেটা পাস করা

প্রথমে, আসুন দেখি কিভাবে আমরা প্যারেন্টের কাছ থেকে গতিশীলভাবে তৈরি উপাদানগুলিতে ডেটা পাস করতাম। এখানে, এই উদাহরণে, কম্পোনেন্ট টেমপ্লেটের মধ্যে, আমাদের *ngComponentOutlet আছে এবং আমরা এটি আমাদের প্লেয়ার কম্পোনেন্টে পাঠাচ্ছি।

এই ক্ষেত্রে, আমরা একটি কাস্টম চাইল্ড ইনজেক্টরও পাস করছি, এবং এইভাবে আমরা আগে চাইল্ড কম্পোনেন্টের জন্য ডেটা ইনজেক্ট করব।

main.ts

 @Component({ selector: 'app-root', template: ` <ng-container *ngComponentOutlet="playerComponent; injector: childInjector"></ng-container> ` }) export class App { protected playerComponent = PlayerComponent; }

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

 export class App { protected childInjector?: Injector; ... }

তারপর, আমাদের কনস্ট্রাক্টরের মধ্যে কৌণিক কোর থেকে ইনজেক্টরে ইনজেকশন করতে হবে।

 export class App { ... constructor(private injector: Injector) { } }

এর পরে, শিশুকে আমাদের প্লেয়ার টোকেন সরবরাহ করার জন্য তৈরি পদ্ধতি এবং সরবরাহকারীদের অ্যারে ব্যবহার করে আমাদের চাইল্ড ইনজেক্টর সেট করতে হবে।

 export class App { ... constructor(private injector: Injector) { this.childInjector = Injector.create({ providers: [ { provide: PlayerToken, useValue: this.player } ], parent: this.injector }); } }

এবং পরিশেষে, চাইল্ড কম্পোনেন্ট, আমাদের প্লেয়ার কম্পোনেন্ট, আমাদের প্লেয়ার প্রোপার্টি সেট করতে হবে কৌণিক কোর থেকে ইনজেকশন পদ্ধতি দিয়ে।

player.component.ts

 export class PlayerComponent { protected player?: Player = inject(PlayerToken); }

সুতরাং, এই সব শুধুমাত্র একটি গতিশীল উপাদান একটি সাধারণ প্লেয়ার বস্তু পাস. আমি বলতে চাচ্ছি, যদি এটি একটি গতিশীল উপাদান না হয়, তাহলে আমরা এটিকে একটি @Input করে তুলতাম এবং প্লেয়ার ডেটা অবজেক্টটিকে প্যারেন্টের @Input সাথে আবদ্ধ করতাম। কিন্তু এটি একটি গতিশীলভাবে তৈরি উপাদান, তাই আমরা এটি করতে পারি না, তাই না?

ঠিক আছে, কৌণিক ষোল হিসাবে, আমরা আসলে এর পরিবর্তে @Input s ব্যবহার করতে পারি, এবং আমরা এখন পর্যন্ত যা দেখেছি তার চেয়ে এটি অনেক সহজ।

*ngComponentOutlet ইনপুট অবজেক্ট ব্যবহার করে নতুন উপায়ে ডেটা পাস করা

আমরা পরিবর্তে এই প্লেয়ার প্রপার্টিটিকে @Input পরিবর্তন করে শুরু করি। এবং, এটা সহজভাবে আমাদের প্লেয়ার ইন্টারফেসে টাইপ করা হয়েছে।

player.component.ts

 export class PlayerComponent { @Input() player?: Player; }

এখন, আমরা ইনজেকশন পদ্ধতি এবং প্লেয়ার টোকেন আমদানি অপসারণ করতে পারি কারণ সেগুলির আর প্রয়োজন নেই৷ তারপরে, আমাদের অভিভাবকের মধ্যে, টেমপ্লেটে, আমরা ইনজেক্টরটিকে সরিয়ে ফেলতে পারি, এবং পরিবর্তে, এটিকে একটি ইনপুট বস্তু দিয়ে প্রতিস্থাপন করতে পারি। আমরা এই বস্তুটিকে যেকোনো সংখ্যক ইনপুটে পাস করতে পারি। সুতরাং, যদি আমাদের পাঁচটি ইনপুট থাকে, আমরা কেবল তাদের নামগুলি অন্তর্ভুক্ত করব এবং তারপরে আমাদের যা কিছু ডেটা প্রয়োজন তা প্রতিটিকে পাস করব।

কিন্তু এই ক্ষেত্রে, আমাদের চাইল্ড কম্পোনেন্ট, প্লেয়ারে আমাদের শুধুমাত্র একটি ইনপুট আছে, তাই আমাদের এটি পাস করতে হবে।

main.ts

 @Component({ selector: 'app-root', template: ` <ng-container *ngComponentOutlet="playerComponent; inputs: { player }"></ng-container> ` })

এখন, আমরা চাইল্ড ইনজেক্টর অপসারণ করতে পারি। এর মানে হল আমরা কনস্ট্রাক্টরকে সম্পূর্ণভাবে মুছে ফেলতে পারি। এবং অবশেষে, আমরা কৌণিক কোর এবং প্লেয়ার টোকেন আমদানি থেকে ইনজেক্টরটিকে সরিয়ে ফেলতে পারি কারণ আমরা সেগুলি আর ব্যবহার করছি না।

 export class App { protected player: Player = { name: 'LeBron James', games: 1421, points: 38652, fieldGoalPercentage: 0.505, threePointPercentage: 0.345, imageName: 'lebron-james' }; protected playerComponent = PlayerComponent; }

এবং এটাই. আমরা দেখতে পাচ্ছি সবকিছু ঠিক আগের মতই কাজ করে। সুতরাং, বন্ধ করা বেশ কিছুটা সহজ এবং কম কোডও যা সর্বদা দুর্দান্ত।

যদিও একটি অস্বস্তি হল যে যখন @Input সমর্থিত হয়, @Output তা নয়৷ একটি bummer ধরনের, কিন্তু এটা কি এটা. আশা করি, তারা ভবিষ্যতে সমর্থন যোগ করবে কারণ এটিও খুব সহজ হবে, কিন্তু আমাদের শুধু অপেক্ষা করতে হবে এবং দেখতে হবে।

এটি কর্মে দেখতে চান?

নীচে Stackblitz উদাহরণে এই কৌশলগুলির ডেমো কোড এবং উদাহরণগুলি দেখুন। আপনার যদি কোন প্রশ্ন বা চিন্তা থাকে, একটি মন্তব্য করতে দ্বিধা করবেন না.