كيفية الوصول إلى الأبوي من العناصر المُستضافة في Angular
للوصول إلى الـ sidenav-component
في الأب من العنصر المُستضاف داخل
، يمكنك استخدام خدمة ViewChild
و ElementRef
للوصول إلى العنصر المضمن للـ sidenav-component
في الكود. يُمكنك القيام بذلك عن طريق تعريف متغير في الطفل المُستضاف (hosted-child
) واستخدامه للوصول إلى sidenav-component
الأب.
في الأبوي، يُمكنك تعريف ViewChild
لـ sidenav-component
واستخدامه لتمثيل العنصر في القالب. ثم يُمكنك استخدام هذا المتغير لتنفيذ sidenav.open()
من الطفل المُستضاف.
-
تنسيق بيانات العمليات في Angular.08/04/2024
-
أفضل أطُر تصميم وتطوير تطبيقات الويب الحديثة07/01/2024
-
فهم استخدام @Input و @Output في Angular.08/04/2024
الأمر يتطلب إجراء التالي:
- في الأب، قم بتعريف
ViewChild
لـsidenav-component
:
typescriptimport { Component, ViewChild } from '@angular/core';
import { SidenavComponent } from 'path-to-your-sidenav-component';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
@ViewChild(SidenavComponent)
sidenav: SidenavComponent;
}
- ثم، في الطفل المُستضاف، يمكنك استخدام
ElementRef
للوصول إلى العنصر المُضمّن لـsidenav-component
:
typescriptimport { Component, ElementRef } from '@angular/core';
@Component({
selector: 'app-child',
templateUrl: './child.component.html',
styleUrls: ['./child.component.css']
})
export class ChildComponent {
constructor(private elRef: ElementRef) {}
toggleSidenav() {
const parentComponent = this.elRef.nativeElement.parentElement.parentElement;
const sidenavComponent = parentComponent.querySelector('sidenav-component');
sidenavComponent.open();
}
}
في هذا المثال، تم استخدام ElementRef
للوصول إلى العنصر الأب الثمين، ثم تم استخدام querySelector
للعثور على sidenav-component
داخل العنصر الأب وتشغيل الدالة open()
عليه.
المزيد من المعلومات
لإضافة المزيد من التفاصيل، يمكننا تحسين الطريقة التي يتم بها الوصول إلى sidenav-component
في الأبوي. بدلاً من استخدام ElementRef
و querySelector
، يمكننا استخدام ViewChild
للوصول مباشرة إلى sidenav-component
في الطفل المُستضاف.
- في الأب، نقوم بتعريف
ViewChild
لـsidenav-component
:
typescriptimport { Component, ViewChild } from '@angular/core';
import { SidenavComponent } from 'path-to-your-sidenav-component';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
@ViewChild(SidenavComponent)
sidenav: SidenavComponent;
}
- ثم، في الطفل المُستضاف، نقوم بإرسال إشارة للوصول إلى
sidenav-component
في الأب:
typescriptimport { Component, EventEmitter, Output } from '@angular/core';
@Component({
selector: 'app-child',
templateUrl: './child.component.html',
styleUrls: ['./child.component.css']
})
export class ChildComponent {
@Output() openSidenav = new EventEmitter<void>();
toggleSidenav() {
this.openSidenav.emit();
}
}
- في القالب الخاص بالطفل المُستضاف، نقوم بتعيين الدالة
toggleSidenav()
للزر أو العنصر الذي ينشط فتح الـsidenav
:
html<button (click)="toggleSidenav()">Toggle Sidenavbutton>
- في القالب الرئيسي (الأب)، نقوم بإضافة الـ
app-child
مع الربط بين الإشارة التي تم إرسالها ودالة فتح الـsidenav
في الأب:
html<app-child (openSidenav)="sidenav.open()">app-child>
بهذه الطريقة، يتمكن الطفل المُستضاف من إرسال إشارة إلى الأب عند الضغط على الزر، والأب يستجيب لهذه الإشارة عن طريق فتح sidenav
باستخدام ViewChild
المعرفة.