@Input ਅਤੇ @Output ਕੰਪੋਨੈਂਟ ਸੰਚਾਰ ਨੂੰ ਕਿਵੇਂ ਸਮਰੱਥ ਬਣਾਉਂਦੇ ਹਨ?

Question

Accepted Answer

`@Input` ਅਤੇ `@Output` ਇੱਕ ਮਾਤਾ-ਪਿਤਾ ਅਤੇ ਬਾਲ ਕੰਪੋਨੈਂਟ ਦੇ ਵਿੱਚ ਸੰਚਾਰ ਕਾ ਮਿਆਰੀ ਤਰੀਕਾ ਹੈ: **`@Input`** ਡਾਟਾ *ਹੇਠਾਂ* ਭੇਜਦਾ ਹੈ (ਮਾਤਾ-ਪਿਤਾ → ਬਾਲ), ਅਤੇ **`@Output`** ਘਟਨਾਵਾਂ *ਉੱਪਰ* ਭੇਜਦਾ ਹੈ (ਬਾਲ → ਮਾਤਾ-ਪਿਤਾ)। ਇਹ ਜ਼ਿਆਦਾ ਵਿਆਪਕ "props down, events up" ਪੈਟਰਨ ਨੂੰ ਪ੍ਰਸਤੁ ਕਰਦਾ ਹੈ। ## @Input — ਡਾਟਾ ਹੇਠਾਂ ਵਗਦਾ ਹੈ ```ts // child: UserCardComponent import { Component, Input } from "@angular/core"; @Component({ selector: "app-user-card", template: `

` }) export class UserCardComponent { @Input() user!: User; // receives data from the parent @Input() showEmail = false; // with a default } ``` ```html ``` ## @Output — ਘਟਨਾਵਾਂ ਉੱਪਰ ਵਗਦੀਆਂ ਹਨ ```ts // child emits an event the parent can listen to import { Component, Output, EventEmitter } from "@angular/core"; @Component({ selector: "app-user-card", template: ``, }) export class UserCardComponent { @Output() deleted = new EventEmitter(); // declares an output event onDelete() { this.deleted.emit(this.user.id); // emit with a payload } } ``` ```html ``` ਬਾਲ ਕੰਪੋਨੈਂਟ ਇੱਕ `EventEmitter` ਦੁਆਰਾ ਵਿਸਰਜਿਤ ਕਰਦਾ ਹੈ; ਮਾਤਾ-ਪਿਤਾ ਇਸ ਨੂੰ `(eventName)` ਨਾਲ ਬੰਨ੍ਹਦਾ ਹੈ ਅਤੇ ਪੇਲੋਡ ਨੂੰ `$event` ਵਜੋਂ ਪ੍ਰਾਪਤ ਕਰਦਾ ਹੈ। ਬਾਲ ਕੰਪੋਨੈਂਟ ਕਦੀ ਮਾਤਾ-ਪਿਤਾ ਦੇ ਡਾਟਾ ਨੂੰ ਸਿੱਧੇ ਤੌਰ 'ਤੇ ਸੋਧਦਾ ਨਹੀਂ — ਇਹ ਵਿਸਰਜਿਤ ਕਰਕੇ *ਕਾਰਵਾਈ ਦੀ* ਬੇਨਤੀ ਕਰਦਾ ਹੈ। ## ਪੂਰਾ ਪੈਟਰਨ ```text Parent ──[user]──────────────→ Child (@Input: data down) Parent ←──(deleted)=removeUser─ Child (@Output: events up) ``` ## ਆਧੁਨਿਕ ਸਿਗਨਲ ਇਨਪੁਟ ```ts name = input(); // signal-based @Input (newer Angular) deleted = output(); // signal-based @Output ``` ਹਾਲੀਆ Angular ਸਿਗਨਲ-ਅਧਾਰਿਤ `input()`/`output()` ਫੰਕਸ਼ਨਾਂ ਨੂੰ ਇੱਕ ਵਿਕਲਪ ਦੇ ਰੂਪ ਵਿੱਚ ਜੋੜਦਾ ਹੈ। ## ਇਹ ਕਿਉਂ ਮਾਇਨੇ ਰੱਖਦਾ ਹੈ `@Input`/`@Output` Angular ਵਿੱਚ ਮਾਤਾ-ਪਿਤਾ-ਬਾਲ ਸੰਚਾਰ ਅਤੇ ਦੁਬਾਰਾ ਵਰਤੋ ਯੋਗ ਕੰਪੋਨੈਂਟਾਂ ਦਾ ਮੁੱਖ ਹਨ — ਉਹ ਇੱਕ-ਦਿਸ਼ਾ ਡਾਟਾ ਪ੍ਰਵਾਹ (ਇਨਪੁਟ ਦੁਆਰਾ ਹੇਠਾਂ, ਘਟਨਾਵਾਂ ਦੁਆਰਾ ਉੱਪਰ) ਲਾਗੂ ਕਰਦੇ ਹਨ ਜੋ ਡਾਟਾ ਨੂੰ ਪੂਰਵ-ਨਿਰਧਾਰਿਤ ਅਤੇ ਕੰਪੋਨੈਂਟਾਂ ਨੂੰ ਅਲਹਦਾ ਰੱਖਦਾ ਹੈ। ਇਸ ਜੋੜੀ ਨੂੰ ਸਮਝਣਾ ਕਿਸੇ ਵੀ ਗੈਰ-ਮਾਮੂਲੀ Angular UI ਨੂੰ ਸ਼ਾਮਿਲ ਕਰਨ ਲਈ ਲਾਜ਼ਮੀ ਹੈ; ਅਸੰਬੰਧਿਤ ਕੰਪੋਨੈਂਟਾਂ ਦੇ ਵਿੱਚ ਸੰਚਾਰ ਲਈ, ਤੁਸੀਂ ਇਸ ਦੀ ਬਜਾਏ ਇੱਕ ਸਾਂਝੀ ਸੇਵਾ ਜਾਂ ਸਥਿਤੀ ਲਾਇਬ੍ਰੇਰੀ ਦੀ ਵਰਤੋਂ ਕਰੋਗੇ।