ViewChild এবং ContentChild এর মধ্যে পার্থক্য কী?

Question

Accepted Answer

উভয়ই চাইল্ড এলিমেন্ট/কম্পোনেন্টের রেফারেন্সের জন্য অনুসন্ধান করে, তবে তারা **বিভিন্ন জায়গায়** খোঁজে: **`@ViewChild`** কম্পোনেন্টের *নিজস্ব টেমপ্লেট* অনুসন্ধান করে, যখন **`@ContentChild`** কম্পোনেন্টে **প্রজেক্ট করা** কন্টেন্ট অনুসন্ধান করে `` এর মাধ্যমে। ## @ViewChild — আপনার নিজস্ব টেমপ্লেট অনুসন্ধান করুন ```ts @Component({ template: ` `, }) export class ParentComponent implements AfterViewInit { @ViewChild("nameInput") input!: ElementRef; // by template ref @ViewChild(ChildComponent) child!: ChildComponent; // by component type ngAfterViewInit() { this.input.nativeElement.focus(); // available after the VIEW initializes this.child.doSomething(); // call a child component's method } } ``` `@ViewChild` এলিমেন্ট/কম্পোনেন্ট অ্যাক্সেস করে যা কম্পোনেন্ট নিজেই এর টেমপ্লেটে ঘোষণা করে — **`ngAfterViewInit`** এ উপলব্ধ। ## @ContentChild — প্রজেক্ট করা কন্টেন্ট অনুসন্ধান করুন ```ts @Component({ selector: "app-card", template: `

`, // content projected here }) export class CardComponent implements AfterContentInit { @ContentChild(CardTitleComponent) title!: CardTitleComponent; ngAfterContentInit() { // the projected content is ready here (EARLIER than ngAfterViewInit) console.log(this.title); } } ``` ```html

Hello

``` `@ContentChild` কন্টেন্ট অ্যাক্সেস করে যা **প্যারেন্ট পাস করেছে** (এ প্রজেক্ট করা হয়েছে `` এর মাধ্যমে) — **`ngAfterContentInit`** এ উপলব্ধ। ## মূল পার্থক্য ```text @ViewChild → elements in THIS component's own template → ngAfterViewInit @ContentChild → elements PROJECTED in from the parent → ngAfterContentInit (plural: @ViewChildren / @ContentChildren return a QueryList of all matches) ``` ## বহুবচন সংস্করণ ```ts @ViewChildren(ItemComponent) items!: QueryList; // all matching items ngAfterViewInit() { this.items.forEach(i => ...); this.items.changes.subscribe(...); } ``` ## আধুনিক সিগনাল কোয়েরি ```ts input = viewChild("nameInput"); // signal-based query (newer Angular) ``` ## কেন এটি গুরুত্বপূর্ণ `@ViewChild` (আপনার টেমপ্লেট) এবং `@ContentChild` (প্রজেক্ট করা কন্টেন্ট) এর মধ্যে পার্থক্য — এবং তাদের নিজ নিজ লাইফসাইকেল টাইমিং (`ngAfterViewInit` বনাম `ngAfterContentInit`) — পুনঃব্যবহারযোগ্য কম্পোনেন্ট তৈরি করার সময় অপরিহার্য যা তাদের নিজস্ব টেমপ্লেট এলিমেন্টের সাথে বা ভোক্তারা যে কন্টেন্ট প্রজেক্ট করে তার সাথে ইন্টারঅ্যাক্ট করতে হবে। এটি একটি সাধারণ বিভ্রান্তির বিষয় এবং কম্পোনেন্ট লাইব্রেরি, ট্যাব, ফর্ম কন্ট্রোল এবং র‍্যাপার তৈরি করার সময় একটি ঘন ঘন প্রয়োজনীয়তা যা চাইল্ড এলিমেন্টের সাথে সমন্বয় করতে হবে।