আরেকটি বিকল্প।
ওপি কলব্যাক ব্যবহার করার জন্য একটি উপায় জিজ্ঞাসা করেছিল। এক্ষেত্রে তিনি বিশেষত এমন একটি ফাংশনকে উল্লেখ করছেন যা কোনও ইভেন্ট প্রক্রিয়া করে (তার উদাহরণে: একটি ক্লিক ইভেন্ট), যা @ সার্জিনহোর পরামর্শ অনুযায়ী গৃহীত উত্তর হিসাবে বিবেচিত হবে: সাথে @Outputএবং EventEmitter।
তবে, কলব্যাক এবং ইভেন্টের মধ্যে পার্থক্য রয়েছে: একটি কলব্যাকের সাহায্যে আপনার সন্তানের উপাদানটি পিতামাতার কাছ থেকে কিছু প্রতিক্রিয়া বা তথ্য অর্জন করতে পারে তবে কোনও ইভেন্ট কেবল তা জানাতে পারে যে কোনও প্রতিক্রিয়া প্রত্যাশা ছাড়াই কিছু ঘটেছিল।
এমন কিছু ক্ষেত্রে আছে যেখানে প্রতিক্রিয়া প্রয়োজন, প্রাক্তন। একটি রঙ, বা উপাদানটি পরিচালনা করতে হবে এমন উপাদানগুলির একটি তালিকা পান। কিছু উত্তরের পরামর্শ অনুসারে আপনি আবদ্ধ ফাংশনগুলি ব্যবহার করতে পারেন বা আপনি ইন্টারফেস ব্যবহার করতে পারেন (এটি সর্বদা আমার পছন্দ)।
উদাহরণ
ধরা যাক আপনার কাছে একটি জেনেরিক উপাদান রয়েছে যা উপাদানগুলির একটি তালিকার উপর পরিচালনা করে - আইডি, নাম} যা আপনি এই ক্ষেত্রগুলি সহ আপনার সমস্ত ডাটাবেস টেবিলের সাথে ব্যবহার করতে চান। এই উপাদানটি করা উচিত:
- উপাদানগুলির একটি ব্যাপ্তি (পৃষ্ঠা) পুনরুদ্ধার করুন এবং তাদের একটি তালিকাতে দেখান
- একটি উপাদান সরানোর অনুমতি দিন
- অবহিত করুন যে কোনও উপাদান ক্লিক করা হয়েছে, তাই পিতামাতারা কিছু পদক্ষেপ নিতে পারেন।
- উপাদানগুলির পরবর্তী পৃষ্ঠাটি পুনরুদ্ধার করার অনুমতি দিন।
শিশু উপাদান
সাধারণ বাইন্ডিং ব্যবহার করে আমাদের 1 @Input()এবং 3 @Output()পরামিতি প্রয়োজন (তবে পিতামাতার কোনও প্রতিক্রিয়া ছাড়াই)। যাত্রা। <list-ctrl [items]="list" (itemClicked)="click($event)" (itemRemoved)="removeItem($event)" (loadNextPage)="load($event)" ...>, তবে একটি ইন্টারফেস তৈরি করার জন্য আমাদের কেবল একটির প্রয়োজন হবে @Input():
import {Component, Input, OnInit} from '@angular/core';
export interface IdName{
id: number;
name: string;
}
export interface IListComponentCallback<T extends IdName> {
getList(page: number, limit: number): Promise< T[] >;
removeItem(item: T): Promise<boolean>;
click(item: T): void;
}
@Component({
selector: 'list-ctrl',
template: `
<button class="item" (click)="loadMore()">Load page {{page+1}}</button>
<div class="item" *ngFor="let item of list">
<button (click)="onDel(item)">DEL</button>
<div (click)="onClick(item)">
Id: {{item.id}}, Name: "{{item.name}}"
</div>
</div>
`,
styles: [`
.item{ margin: -1px .25rem 0; border: 1px solid #888; padding: .5rem; width: 100%; cursor:pointer; }
.item > button{ float: right; }
button.item{margin:.25rem;}
`]
})
export class ListComponent implements OnInit {
@Input() callback: IListComponentCallback<IdName>; // <-- CALLBACK
list: IdName[];
page = -1;
limit = 10;
async ngOnInit() {
this.loadMore();
}
onClick(item: IdName) {
this.callback.click(item);
}
async onDel(item: IdName){
if(await this.callback.removeItem(item)) {
const i = this.list.findIndex(i=>i.id == item.id);
this.list.splice(i, 1);
}
}
async loadMore(){
this.page++;
this.list = await this.callback.getList(this.page, this.limit);
}
}
মূল উপাদান Comp
এখন আমরা প্যারেন্টে তালিকার উপাদানটি ব্যবহার করতে পারি।
import { Component } from "@angular/core";
import { SuggestionService } from "./suggestion.service";
import { IdName, IListComponentCallback } from "./list.component";
type Suggestion = IdName;
@Component({
selector: "my-app",
template: `
<list-ctrl class="left" [callback]="this"></list-ctrl>
<div class="right" *ngIf="msg">{{ msg }}<br/><pre>{{item|json}}</pre></div>
`,
styles:[`
.left{ width: 50%; }
.left,.right{ color: blue; display: inline-block; vertical-align: top}
.right{max-width:50%;overflow-x:scroll;padding-left:1rem}
`]
})
export class ParentComponent implements IListComponentCallback<Suggestion> {
msg: string;
item: Suggestion;
constructor(private suggApi: SuggestionService) {}
getList(page: number, limit: number): Promise<Suggestion[]> {
return this.suggApi.getSuggestions(page, limit);
}
removeItem(item: Suggestion): Promise<boolean> {
return this.suggApi.removeSuggestion(item.id)
.then(() => {
this.showMessage('removed', item);
return true;
})
.catch(() => false);
}
click(item: Suggestion): void {
this.showMessage('clicked', item);
}
private showMessage(msg: string, item: Suggestion) {
this.item = item;
this.msg = 'last ' + msg;
}
}
মনে রাখবেন যে, <list-ctrl>পায় this(পিতা বা মাতা উপাদান) কলব্যাক অবজেক্ট হিসেবে। একটি অতিরিক্ত সুবিধা হ'ল এটি পিতামাত্ত উদাহরণটি প্রেরণের দরকার নেই, এটি কোনও পরিষেবা বা কোনও বস্তু হতে পারে যা ইন্টারফেস প্রয়োগ করে যদি আপনার ব্যবহারের ক্ষেত্রে এটি অনুমতি দেয়।
পুরো উদাহরণটি এই স্ট্যাকব্লিটজে রয়েছে ।
@Inputপরামর্শ দেওয়া হয়েছে আমার কোডটি স্প্যাগেটি বানানো এবং বজায় রাখা সহজ নয় ..@Outputগুলি আমি যা চাই তা করার অনেক বেশি প্রাকৃতিক উপায়। ফলস্বরূপ আমি স্বীকৃত উত্তরটি পরিবর্তন করেছি