@Input() დეკორატორი, angular-ში (ანგულარი)

ანგულარში (angular)-ში საშუალება გვაქვს მონაცემები კომპონენტებს შორის ვამოძრავოთ რამდენიმე გზით, ამის ერთ-ერთი გზაა მშობელი კომპონენტიდან მის შვილ კომპონენტში ინფორმაციის მიღება @Input() დეკორატორის დახმარებით

სადემონსტრაციოთ  გავაკეთოთ 2 კომპონენტი, 1 რომელსაც დავარქმევთ parent-ს ხოლო შვილ კომპონენტს დავარქვათ child კომპონენტი.

კომპონენტის გენერაციისთვის გამოვიყენოთ აგნულარ CLI-ის ბრძანება, რომელიც შექმნის მშობელ კომპონენტს

ng g c parent

ხოლორ შვილი კომპონენტის გენერაციისთვის გამოვიყენოთ იგივე ბრძანება

ng g c child

მშობელი კომპონენტის parent.component.html ფაილში გამოვიყენოთ მისი შვილი კომპონენტი

<p>parent works!</p>
<app-child></app-child>

შემდეგ გავხსნათ შვილი კომპონენტი და child.component.ts ფაილში გამოვიყენოთ @Input() დეკორატორი

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

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.scss']
})
export class ChildComponent {

  @Input() public textFromParent: string = '';
  
}

იმისთვის, რომ ეკრანზე გამოვსახოთ textFromParent თვისება აუცილებელია child.component.html ფაილში ინტერპოლაციით გამოვიძახოთ textFromParent თვისება

<p>child works! {{textFromParent}}</p>

ჩვენ უკვე ველოდებით შვილ კომპონენტში ინფორმაციას, რომელიც მშობელი კომპონენტიდან უნდა გავგზავნოთ ამისთვის 1 ნაბიჯი დაგვრჩა მშობელი კომპონეტნის parent.component.html ფაილში გახსნის სელექტორს გადავცეთ სასურველი ინფორმაცია

<app-child [textFromParent]="'სასურველი ინფორმაცია'"></app-child>