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