كيفية الوصول إلى الأبوي من العناصر المُستضافة في Angular

للوصول إلى الـ sidenav-component في الأب من العنصر المُستضاف داخل ، يمكنك استخدام خدمة ViewChild و ElementRef للوصول إلى العنصر المضمن للـ sidenav-component في الكود. يُمكنك القيام بذلك عن طريق تعريف متغير في الطفل المُستضاف (hosted-child) واستخدامه للوصول إلى sidenav-component الأب.

في الأبوي، يُمكنك تعريف ViewChild لـ sidenav-component واستخدامه لتمثيل العنصر في القالب. ثم يُمكنك استخدام هذا المتغير لتنفيذ sidenav.open() من الطفل المُستضاف.

الأمر يتطلب إجراء التالي:

1. في الأب، قم بتعريف ViewChild لـ sidenav-component:

typescriptCopy code
import { 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;
}

2. ثم، في الطفل المُستضاف، يمكنك استخدام ElementRef للوصول إلى العنصر المُضمّن لـ sidenav-component:

typescriptCopy code
import { 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 في الطفل المُستضاف.

1. في الأب، نقوم بتعريف ViewChild لـ sidenav-component:

typescriptCopy code
import { 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;
}

2. ثم، في الطفل المُستضاف، نقوم بإرسال إشارة للوصول إلى sidenav-component في الأب:

typescriptCopy code
import { 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();
  }
}

3. في القالب الخاص بالطفل المُستضاف، نقوم بتعيين الدالة toggleSidenav() للزر أو العنصر الذي ينشط فتح الـ sidenav:

htmlCopy code
<button (click)="toggleSidenav()">Toggle Sidenavbutton>

4. في القالب الرئيسي (الأب)، نقوم بإضافة الـ app-child مع الربط بين الإشارة التي تم إرسالها ودالة فتح الـ sidenav في الأب:

htmlCopy code
<app-child (openSidenav)="sidenav.open()">app-child>

بهذه الطريقة، يتمكن الطفل المُستضاف من إرسال إشارة إلى الأب عند الضغط على الزر، والأب يستجيب لهذه الإشارة عن طريق فتح sidenav باستخدام ViewChild المعرفة.