উভয়ই চাইল্ড এলিমেন্ট/কম্পোনেন্টের রেফারেন্সের জন্য অনুসন্ধান করে, তবে তারা বিভিন্ন জায়গায় খোঁজে: @ViewChild কম্পোনেন্টের অনুসন্ধান করে, যখন কম্পোনেন্টে কন্টেন্ট অনুসন্ধান করে এর মাধ্যমে।
উভয়ই চাইল্ড এলিমেন্ট/কম্পোনেন্টের রেফারেন্সের জন্য অনুসন্ধান করে, তবে তারা বিভিন্ন জায়গায় খোঁজে: @ViewChild কম্পোনেন্টের অনুসন্ধান করে, যখন কম্পোনেন্টে কন্টেন্ট অনুসন্ধান করে এর মাধ্যমে।
@ContentChild<ng-content>@Component({
template: `
<input #nameInput /> <!-- a template reference in MY template -->
<app-child></app-child>
`,
})
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 এ উপলব্ধ।
@Component({
selector: "app-card",
template: `<div class="card"><ng-content></ng-content></div>`, // 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);
}
}
<!-- parent projects content INTO app-card -->
<app-card>
<app-card-title>Hello</app-card-title> <!-- this is what ContentChild finds -->
</app-card>
@ContentChild কন্টেন্ট অ্যাক্সেস করে যা প্যারেন্ট পাস করেছে (এ প্রজেক্ট করা হয়েছে <ng-content> এর মাধ্যমে) — ngAfterContentInit এ উপলব্ধ।
@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)
@ViewChildren(ItemComponent) items!: QueryList<ItemComponent>; // all matching items
ngAfterViewInit() { this.items.forEach(i => ...); this.items.changes.subscribe(...); }
input = viewChild<ElementRef>("nameInput"); // signal-based query (newer Angular)
@ViewChild (আপনার টেমপ্লেট) এবং @ContentChild (প্রজেক্ট করা কন্টেন্ট) এর মধ্যে পার্থক্য — এবং তাদের নিজ নিজ লাইফসাইকেল টাইমিং (ngAfterViewInit বনাম ngAfterContentInit) — পুনঃব্যবহারযোগ্য কম্পোনেন্ট তৈরি করার সময় অপরিহার্য যা তাদের নিজস্ব টেমপ্লেট এলিমেন্টের সাথে বা ভোক্তারা যে কন্টেন্ট প্রজেক্ট করে তার সাথে ইন্টারঅ্যাক্ট করতে হবে।
এটি একটি সাধারণ বিভ্রান্তির বিষয় এবং কম্পোনেন্ট লাইব্রেরি, ট্যাব, ফর্ম কন্ট্রোল এবং র্যাপার তৈরি করার সময় একটি ঘন ঘন প্রয়োজনীয়তা যা চাইল্ড এলিমেন্টের সাথে সমন্বয় করতে হবে।
বিস্তারিত উত্তরসহ IT ইন্টারভিউ প্রশ্নের একটি লাইব্রেরি — জুনিয়র থেকে সিনিয়র পর্যন্ত।
দান করুন