با استفاده از این تکنیک ساده، داده ها را بین اجزای Angular خود ارسال کنید.

در Angular، یک صفحه وب می‌تواند شامل بسیاری از اجزای مختلف قابل استفاده مجدد باشد. هر مؤلفه معمولاً دارای منطق TypeScript، قالب HTML و استایل CSS است.

شما همچنین می توانید از اجزای داخل اجزای دیگر استفاده مجدد کنید. در این حالت، می‌توانید از Decorator خروجی برای ارسال اطلاعات از یک مؤلفه فرزند به مؤلفه اصلی آن استفاده کنید.

همچنین می توانید از Decorator خروجی برای گوش دادن به رویدادهایی که در مؤلفه فرزند رخ می دهد استفاده کنید.

نحوه اضافه کردن دکوراتور خروجی به کامپوننت کودک

ابتدا باید یک برنامه Angular جدید با یک جزء والد و یک مؤلفه فرزند ایجاد کنید.

هنگامی که یک مؤلفه والد و فرزند دارید، می توانید از Decorator خروجی برای انتقال داده ها و گوش دادن به رویدادها بین دو مؤلفه استفاده کنید.

1. یک برنامه Angular جدید ایجاد کنید. به طور پیش فرض، “app” نام مولفه ریشه است. این مؤلفه شامل سه فایل اصلی «app.component.html»، «app.component.css» و «app.component.ts» است.
2. برای این مثال، مولفه “برنامه” به عنوان مولفه والد عمل می کند. همه محتوای موجود در “app.component.html” را با موارد زیر جایگزین کنید:
     

   این جزء اصلی است

3. در “app.component.css” مقداری استایل به مؤلفه برنامه والد اضافه کنید: .parent-component {  font-family: Arial, Helvetica, sans-serif; پس زمینه-رنگ: مرجانی روشن; padding: 20px}
4. برای ایجاد یک کامپوننت Angular جدید به نام “data-component” از دستور “ng generate component” استفاده کنید. در این مثال، “data-component” مؤلفه فرزند را نشان خواهد داد. ng g c مولفه داده
5. در «data-component.component.html» محتوا را به مؤلفه فرزند اضافه کنید. برای افزودن یک دکمه جدید، محتوای فعلی را جایگزین کنید. دکمه را به تابعی متصل کنید که با کلیک کاربر روی آن اجرا شود:
     

   این جزء فرزند است

      روی من

   کلیک کنید

<div class="parent-component">
  <h1> This is the parent component </h1>
</div>

.parent-component {
  font-family: Arial, Helvetica, sans-serif;
  background-color: lightcoral;
  padding: 20px
}

ng g c data-component

<div class="child-component">
  <p> This is the child component </p>
  <button (click)="onButtonClick()">Click me</button>
</div>

1. در “data-component.component.css” مقداری استایل به مؤلفه فرزند اضافه کنید: .child-component {  font-family: Arial, Helvetica, sans-serif; رنگ پس زمینه: آبی روشن. حاشیه: 20 پیکسل padding: 20px}
2. تابع onButtonClick() را به فایل TypeScript برای جزء اضافه کنید، در “data-component.component.ts”: onButtonClick() {}
3. هنوز در داخل فایل TypeScript، “Output” و “EventEmitter” را به لیست واردات اضافه کنید: import { Component, Output, EventEmitter, OnInit } from ‘@angular/core’;
4. در داخل کلاس DataComponentComponent، یک متغیر Output برای کامپوننت به نام “buttonWasClicked” اعلام کنید. این یک EventEmitter خواهد بود. EventEmitter یک کلاس داخلی است که به شما این امکان را می دهد که هنگام وقوع یک رویداد به مؤلفه دیگری اطلاع دهید. Export class DataComponentComponent OnInit {  @Output() buttonWasClicked = new EventEmitter(); // …}
5. از فرستنده رویداد “buttonWasClicked” در تابع onButtonClick() استفاده کنید. وقتی کاربر روی دکمه کلیک می‌کند، مؤلفه داده این رویداد را به مؤلفه برنامه والد ارسال می‌کند. onButtonClick() {    this.buttonWasClicked.emit();}

.child-component {
  font-family: Arial, Helvetica, sans-serif;
  background-color: lightblue;
  margin: 20px;
  padding: 20px
}

onButtonClick() {
}

import { Component, Output, EventEmitter, OnInit } from '@angular/core';

export class DataComponentComponent implements OnInit {
  @Output() buttonWasClicked = new EventEmitter<void>();
  // ...
}

onButtonClick() {
    this.buttonWasClicked.emit();
}

نحوه گوش دادن به رویدادها در مؤلفه کودک از مؤلفه والد

برای استفاده از ویژگی Output مؤلفه فرزند، باید به رویداد منتشر شده از مؤلفه والد گوش دهید.

1. از مؤلفه فرزند در «app.component.html» استفاده کنید. هنگام ایجاد تگ HTML می توانید خروجی “buttonWasClicked” را به عنوان ویژگی اضافه کنید. رویداد را به یک تابع جدید متصل کنید.
2. در داخل “app.component.ts”، عملکرد جدید را اضافه کنید تا رویداد کلیک دکمه را هنگامی که در مؤلفه فرزند رخ می دهد، مدیریت کند. هنگامی که کاربر روی دکمه کلیک می کند یک پیام ایجاد کنید. message: string = “”buttonInChildComponentWasClicked() {    this.message = ‘دکمه در مؤلفه فرزند کلیک شد’;}
3. پیام را در “app.component.html” نمایش دهید:

   {{message}}

4. دستور “ng serve” را در ترمینال تایپ کنید تا برنامه Angular خود را اجرا کنید. آن را در یک مرورگر وب در localhost:4200 باز کنید. اجزای والد و فرزند از رنگ‌های پس‌زمینه مختلفی استفاده می‌کنند تا تشخیص بین آنها آسان‌تر شود.
5. روی دکمه Click me کلیک کنید. مؤلفه فرزند رویداد را به مؤلفه والد ارسال می کند که پیام را نمایش می دهد.

<app-data-component (buttonWasClicked)="buttonInChildComponentWasClicked()"></app-data-component>

message: string = ""

buttonInChildComponentWasClicked() {
    this.message = 'The button in the child component was clicked';
}

<p>{{message}}</p>

نحوه ارسال داده از یک مؤلفه فرزند به یک مؤلفه والد

همچنین می توانید داده ها را از مؤلفه فرزند به مؤلفه والد ارسال کنید.

1. در “data-component.component.ts”، یک متغیر اضافه کنید تا لیستی از رشته های حاوی داده ها را ذخیره کنید. listOfPeople: string[] = [‘جوی’، ‘جان’، ‘جیمز’];
2. نوع برگشتی مربوط به ارسال کننده رویداد buttonWasClicked را تغییر دهید. آن را از void به رشته[] تغییر دهید تا با لیست رشته هایی که در مرحله قبل اعلام کرده اید مطابقت داشته باشد: @Output() buttonWasClicked = new EventEmitter();
3. تابع onButtonClick() را تغییر دهید. هنگام ارسال رویداد به مؤلفه والد، داده ها را به عنوان آرگومان به تابع emit() اضافه کنید: onButtonClick() {    this.buttonWasClicked.emit(this.listOfPeople);}
4. در “app.component.html”، تگ “app-data-component” را تغییر دهید. “$event” را به تابع buttonInChildComponentWasClicked() اضافه کنید. این شامل داده های ارسال شده از مؤلفه فرزند است.
5. برای افزودن پارامتر برای داده، تابع را در “app.component.ts” به‌روزرسانی کنید: buttonInChildComponentWasClicked(dataFromChild: string[]) {    this.message = ‘دکمه در مؤلفه فرزند کلیک شد’;}
6. یک متغیر جدید به نام “داده” اضافه کنید تا داده های حاصل از مؤلفه فرزند را ذخیره کنید: message: string = “”data: string[] = []buttonInChildComponentWasClicked(dataFromChild: string[]) {    this.message = ‘دکمه موجود در مؤلفه فرزند کلیک شد’; this.data = dataFromChild;}
7. نمایش داده ها در صفحه HTML:

   {{data.join(‘, ‘)}}

8. دستور “ng serve” را در ترمینال تایپ کنید تا برنامه Angular خود را اجرا کنید. آن را در یک مرورگر وب در localhost:4200 باز کنید.
9. روی دکمه Click me کلیک کنید. مؤلفه فرزند داده ها را از مؤلفه فرزند به مؤلفه والد ارسال می کند.

listOfPeople: string[] = ['Joey', 'John', 'James'];

@Output() buttonWasClicked = new EventEmitter<string[]>();

onButtonClick() {
    this.buttonWasClicked.emit(this.listOfPeople);
}

<app-data-component (buttonWasClicked)="buttonInChildComponentWasClicked($event)"></app-data-component>

buttonInChildComponentWasClicked(dataFromChild: string[]) {
    this.message = 'The button in the child component was clicked';
}

message: string = ""
data: string[] = []

buttonInChildComponentWasClicked(dataFromChild: string[]) {
    this.message = 'The button in the child component was clicked';
    this.data = dataFromChild;
}

<p>{{data.join(', ')}}</p>

ارسال داده به اجزای دیگر با استفاده از دکوراتور خروجی

دکوراتورهای دیگری مانند دکوراتور ورودی یا کامپوننت دکوراتور وجود دارد که می توانید در Angular استفاده کنید. می توانید در مورد اینکه چگونه می توانید از دیگر دکوراتورها در Angular برای ساده کردن کد خود استفاده کنید، بیشتر بیاموزید.

منبع مقاله