تسلط بر ارتباطات والد-کودک در انگولار: فراخوانی روش های کودک

Summarize this content to 400 words in Persian Lang
در این مقاله، ما به پیچیدگی های فراخوانی یک تابع تعریف شده در کامپوننت فرزند از مولفه والد در Angular خواهیم پرداخت. این یک نیاز متداول در بسیاری از برنامه های Angular است، به خصوص زمانی که ما نیاز به جداسازی تمیزی از نگرانی ها داشته باشیم و در عین حال ارتباطات بین مؤلفه ای قوی را امکان پذیر کنیم.

فهرست مطالب

معرفی
پیش نیازها
درک تعامل اجزای زاویه ای
راه اندازی پروژه Angular
ایجاد مؤلفه های والد و فرزند
استفاده كردن @ViewChild برای دسترسی به Child Component
فراخوانی عملکرد جزء کودک
کد نمونه کامل
نتیجه

1. معرفی

Angular، یک چارچوب قدرتمند برای ساخت برنامه های کاربردی وب پویا، راه های مختلفی را برای فعال کردن تعامل بین اجزا ارائه می دهد. یک الگوی ضروری فراخوانی یک تابع در یک جزء فرزند از والد آن است. این مقاله با یک مثال عملی برای تشریح مفاهیم، ​​شما را از طریق مراحل مورد نیاز برای دستیابی به این هدف راهنمایی می کند.

2. پیش نیازها

قبل از اینکه به مثال بپردازیم، مطمئن شوید که موارد زیر را دارید:

درک اولیه از اجزا و خدمات Angular
Angular CLI روی دستگاه شما نصب شده است
راه اندازی پروژه Angular در حال کار

3. درک تعامل اجزای زاویه ای

در Angular، کامپوننت ها اغلب نیاز به ارتباط با یکدیگر دارند. رابطه والد-فرزند رایج است، جایی که مؤلفه والد می تواند داده ها را به مؤلفه فرزند منتقل کند و بالعکس. با این حال، فراخوانی روش‌ها مستقیماً در سراسر این مرز نیازمند رویکرد متفاوتی است که معمولاً شامل Angular است @ViewChild دکوراتور

4. راه اندازی پروژه Angular

اگر قبلاً آن را ندارید، با ایجاد یک پروژه Angular جدید شروع کنید:

ng new parentChildInteraction
cd parentChildInteraction

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

5. ایجاد مؤلفه های والد و فرزند

اجزای والد و فرزند را با استفاده از Angular CLI ایجاد کنید:

ng generate component parent
ng generate component child

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

6. استفاده از @ViewChild برای دسترسی به Child Component

این @ViewChild دکوراتور برای این کار بسیار مهم است. این اجازه می دهد تا مولفه والد به ویژگی ها و روش های مولفه فرزند دسترسی داشته باشد.

مولفه والد (parent.component.ts): مولفه والد را برای استفاده به روز کنید @ViewChild:

import { Component, ViewChild } from ‘@angular/core’;
import { ChildComponent } from ‘../child/child.component’;

@Component({
selector: ‘app-parent’,
templateUrl: ‘./parent.component.html’,
styleUrls: [‘./parent.component.css’] })
export class ParentComponent {
@ViewChild(ChildComponent) childComponent!: ChildComponent;

triggerChildFunction() {
this.childComponent.childFunction();
}
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

Child Component (child.component.ts): تابع را در جزء فرزند تعریف کنید:

import { Component } from ‘@angular/core’;

@Component({
selector: ‘app-child’,
templateUrl: ‘./child.component.html’,
styleUrls: [‘./child.component.css’] })
export class ChildComponent {
childFunction() {
console.log(‘Child function called!’);
}
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

7. فراخوانی عملکرد جزء کودک

الگوی مؤلفه والد را طوری تغییر دهید که دکمه‌ای را وارد کند که عملکرد را در مؤلفه فرزند فعال می‌کند:

الگوی مولفه والد (parent.component.html):

Parent Component
(click)=”triggerChildFunction()”>Call Child Function

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

8. کد نمونه کامل

مولفه والد (parent.component.ts):

import { Component, ViewChild } from ‘@angular/core’;
import { ChildComponent } from ‘../child/child.component’;

@Component({
selector: ‘app-parent’,
templateUrl: ‘./parent.component.html’,
styleUrls: [‘./parent.component.css’] })
export class ParentComponent {
@ViewChild(ChildComponent) childComponent!: ChildComponent;

triggerChildFunction() {
this.childComponent.childFunction();
}
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

الگوی مولفه والد (parent.component.html):

Parent Component
(click)=”triggerChildFunction()”>Call Child Function

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

Child Component (child.component.ts):

import { Component } from ‘@angular/core’;

@Component({
selector: ‘app-child’,
templateUrl: ‘./child.component.html’,
styleUrls: [‘./child.component.css’] })
export class ChildComponent {
childFunction() {
console.log(‘Child function called!’);
}
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

قالب Child Component (child.component.html):

Child Component

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

9. نتیجه گیری

با دنبال کردن این راهنما، اکنون باید بتوانید تابعی را در کامپوننت فرزند از کامپوننت والد در Angular فراخوانی کنید. این الگو به ایجاد یک پایگاه کد مدولارتر و قابل نگهداری با تعریف واضح تعاملات بین اجزا کمک می کند.

ng new parentChildInteraction
cd parentChildInteraction

ng generate component parent
ng generate component child

   import { Component, ViewChild } from '@angular/core';
   import { ChildComponent } from '../child/child.component';

   @Component({
     selector: 'app-parent',
     templateUrl: './parent.component.html',
     styleUrls: ['./parent.component.css']
   })
   export class ParentComponent {
     @ViewChild(ChildComponent) childComponent!: ChildComponent;

     triggerChildFunction() {
       this.childComponent.childFunction();
     }
   }

   import { Component } from '@angular/core';

   @Component({
     selector: 'app-child',
     templateUrl: './child.component.html',
     styleUrls: ['./child.component.css']
   })
   export class ChildComponent {
     childFunction() {
       console.log('Child function called!');
     }
   }

  
Parent Component
   (click)="triggerChildFunction()">Call Child Function
  

import { Component, ViewChild } from '@angular/core';
import { ChildComponent } from '../child/child.component';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent {
  @ViewChild(ChildComponent) childComponent!: ChildComponent;

  triggerChildFunction() {
    this.childComponent.childFunction();
  }
}

  
Parent Component
   (click)="triggerChildFunction()">Call Child Function
  

import { Component } from '@angular/core';

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent {
  childFunction() {
    console.log('Child function called!');
  }
}

  
Child Component