Déanann an bheirt iad ag fiosrú tagairtí do eilimintí/chomhpháirt leanaí, ach breathnaíonn siad i láithreacha éagsúla: déanann @ViewChild fiosrú ar , agus déanann fiosrú ar an ábhar chomhpháirt trí .
Déanann an bheirt iad ag fiosrú tagairtí do eilimintí/chomhpháirt leanaí, ach breathnaíonn siad i láithreacha éagsúla: déanann @ViewChild fiosrú ar , agus déanann fiosrú ar an ábhar chomhpháirt trí .
@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
}
}
Tugann @ViewChild rochtain ar eilimintí/chomhpháirt a dhéanann an chomhpháirt féin a dhearbhú ina teampláid — ar fáil in 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>
Tugann @ContentChild rochtain ar an ábhar a sheol an tuismitheoir isteach (intuigthe trí <ng-content>) — ar fáil in 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)
Bheith ábalta @ViewChild (do theampláid) a dhéanamh idirdhealaithe ó @ContentChild (ábhar intuigthe) — agus a n-am-líne timthriall beatha faoi seach (ngAfterViewInit vs ngAfterContentInit) — tá sé riachtanach nuair a bhíonn tú ag tógáil comhpháirteanna in-athúsáideach ar gá dóibh a bheith ag idirghníomhú le heilimintí a bhíonn dá dteampláid féin nó an t-ábhar a bhíonn na tomhaltóirí ag socrú isteach iontu.
Is pointe mearbhaill choitianta agus riachtanas minic ann nuair atá tú ag cur tógála ar leabharlanna comhpháirteanna, tabhais, rialúchán fhoirmeacha agus foluain ar chaoi ar chóir dóibh a bheith ag teagmháil le heilimintí leanaí.