পিতা-মাতার থেকে সন্তানের কাছে কীভাবে কোনও ইভেন্ট নির্গত করবেন?

Question

আমি বর্তমানে কৌণিক 2 ব্যবহার করছি Usually সাধারণত আমরা ব্যবহার করি @Output() addTab = new EventEmitter<any>();এবং তারপরে addTab.emit()প্যারেন্ট উপাদানগুলিতে কোনও ইভেন্ট প্রেরণ করি।

অভিভাবক থেকে সন্তানের কাছে আমরা কীভাবে এটি ভাইরাস সেরসা করতে পারি?

Comments

শিশু উপাদান হিসাবে ইনপুট হিসাবে পাস করা একটি এক্সপ্রেশনের মানটি কেবল পরিবর্তন করুন, এবং শিশু উপাদানটি এটি পাবেন (এবং এনজিওচেনজ দ্বারা অবহিত হবে)। আপনি পর্যবেক্ষণযোগ্য একটি ভাগ করে নেওয়া পরিষেবা ব্যবহার করে কোনও ইভেন্টও ছড়িয়ে দিতে পারেন।

— জেবি নিজেট

Answer 1

আরএক্সজেগুলি ব্যবহার করে , আপনি Subjectআপনার পিতামাতার উপাদানগুলিতে একটি ঘোষণা করতে পারেন এবং এটি Observableশিশু উপাদান হিসাবে পাস করতে পারেন, শিশু উপাদানটির কেবল এটিতে সাবস্ক্রাইব করতে হবে Observable।

মূল-কম্পোনেন্ট

eventsSubject: Subject<void> = new Subject<void>();

emitEventToChild() {
  this.eventsSubject.next();
}

মূল HTML নয়

<child [events]="eventsSubject.asObservable()"> </child>    

শিশুদের জন্য কম্পোনেন্ট

private eventsSubscription: Subscription;

@Input() events: Observable<void>;

ngOnInit(){
  this.eventsSubscription = this.events.subscribe(() => doSomething());
}

ngOnDestroy() {
  this.eventsSubscription.unsubscribe();
}

Comments

এছাড়াও, এই পদ্ধতিকে ব্যবহার করে ইভেন্টের সাথে ডেটাও যেতে পারে। লাইক, this.eventsSubject.next({data});পিতামাতার মধ্যে, তারপর this.events.subscribe(({data}) => doSomething(data));সন্তানের মধ্যে।

— ভিনস

সাবস্ক্রিপশন যুক্ত করতে আমি এই দুর্দান্ত উত্তরটি সম্পাদনা করেছি। +1

— উমর ফারুক খাজা

সম্ভবত এখানে একটি প্রাথমিক প্রশ্ন: কেন eventsSubjectএটি কেবল সাবজেক্ট হিসাবে সাবস্ক্রাইব করার পরিবর্তে একটি পর্যবেক্ষণে রূপান্তর করবেন?

— জাস্টিন মরগান

ইভেন্টগুলি পর্যবেক্ষণযোগ্য হিসাবে রূপান্তর করা, শিশু-উপাদানটিকে পরবর্তী () কল করতে বাধা দেয়।

— ব্লুএনসি

এই সমাধানের জন্য ধন্যবাদ, এটি কাজ করে তবে আমি কনসোলে একটি ত্রুটি পেয়েছি: "কোর.জেএস: 6185 ত্রুটি টাইপ এরর: অনির্ধারিত সম্পত্তি 'সাবস্ক্রাইব' পড়তে পারছি না" ত্রুটিটি এনজিওনাইনেটে ইভেন্টগুলি সাবস্ক্রাইব () নির্দেশ করছে শিশু উপাদানটির: "this.eventsSubscription = this.events.subscribe (() => doSomething ());" আমি সংস্করণগুলি ব্যবহার করছি: "@ কৌণিক / ক্লিপ": "~ 9.1.0" এবং "আরএক্সজেস" : "~ 6.5.4"

— এডুয়ার্ডো

Answer 2

আমি যতদূর জানি, 2 টি স্ট্যান্ডার্ড উপায় রয়েছে যে আপনি এটি করতে পারেন।

1. @ ইনপুট

যখনই পিতামাতার ডেটা পরিবর্তন হয়, শিশুটিকে এনজিওনচেনজ পদ্ধতিতে এই সম্পর্কে অবহিত করা হয়। শিশু এটিতে অভিনয় করতে পারে। এটি একটি সন্তানের সাথে যোগাযোগের মানক উপায় way

Parent-Component
public inputToChild: Object;

Parent-HTML
<child [data]="inputToChild"> </child>       

Child-Component: @Input() data;

ngOnChanges(changes: { [property: string]: SimpleChange }){
   // Extract changes to the input property by its name
   let change: SimpleChange = changes['data']; 
// Whenever the data in the parent changes, this method gets triggered. You 
// can act on the changes here. You will have both the previous value and the 
// current value here.
}

2. ভাগ করা পরিষেবা ধারণা

একটি পরিষেবা তৈরি করা এবং ভাগ করা পরিষেবাতে একটি পর্যবেক্ষণযোগ্য ব্যবহার করা। শিশু এটিতে সাবস্ক্রাইব করে এবং যখনই কোনও পরিবর্তন আসবে তখন শিশুকে অবহিত করা হবে। এটিও একটি জনপ্রিয় পদ্ধতি। আপনি যখন ইনপুট হিসাবে পাস করেন এমন ডেটা ব্যতীত অন্য কিছু প্রেরণ করতে চান, এটি ব্যবহার করা যেতে পারে।

SharedService
subject: Subject<Object>;

Parent-Component
constructor(sharedService: SharedService)
this.sharedService.subject.next(data);

Child-Component
constructor(sharedService: SharedService)
this.sharedService.subject.subscribe((data)=>{

// Whenever the parent emits using the next method, you can receive the data 
in here and act on it.})

Comments

আমি প্রথম পদ্ধতিটি চেষ্টা করেছি এবং এটি কিছুক্ষণ অবধি ভালভাবে কাজ করেছে এবং এর পরে আমি একটি ত্রুটি বার্তা পেয়েছি যা জানিয়েছে যে মানটি এখন বদলে গেছে, আগে এটি মিথ্যা এবং এখন সত্য। এটি ছাড়াও এটি আমাকে আর কোনও ব্যাখ্যা দেয়নি।

— কোড 1

আপনার বোঝানো একটি এক্সপ্রেশনচেনজডএফটারআইটি হাসবিন চেকড এরির, এই ত্রুটিটি উত্পাদন মোডে ফেলে দেওয়া হবে না।

— ব্যবহারকারী 1337

<child [data]="inputToChild"> </child>সম্ভবত <child [data]="(inputToChild)"> </child>পরিবর্তনগুলি হওয়া উচিত

— pmc

Answer 3

প্যারেন্ট উপাদানগুলিতে আপনি শিশু উপাদানটির পদ্ধতি / পরিবর্তনশীল অ্যাক্সেস করতে @ ভিউচিল্ড () ব্যবহার করতে পারেন।

@Component({
  selector: 'app-number-parent',
  templateUrl: './number-parent.component.html'
})
export class NumberParentComponent {
    @ViewChild(NumberComponent)
    private numberComponent: NumberComponent;
    increase() {
       this.numberComponent.increaseByOne();
    }
    decrease() {
       this.numberComponent.decreaseByOne();
    }
} 

হালনাগাদ:

কৌনিক 8 এর পরে -

@ViewChild(NumberComponent, { static: false })

Comments

এটি পর্যবেক্ষণযোগ্যদের সাথে কাজ করার চেয়ে পরিষ্কার মনে হয়। ত্রুটিটি শিশুটি দেখতে হবে view উদাহরণস্বরূপ, যদি শিশুটি রাউটিংয়ে বোঝাই হয় তবে এটি যেমন numberComponentহবে তেমন ব্যর্থ হবে undefined।

— লজ্জা আগম

এটি কি একটি ভাল অনুশীলন? আমি পর্যবেক্ষণযোগ্যদের চেয়ে পরিষ্কার যে সত্যের সাথে একমত, কিন্তু আমি পিতামাতার কাছ থেকে সন্তানের ভেরিয়েবলগুলি পরিচালনা করার বিষয়ে সন্দেহ করছি about যাইহোক, এটি আমার প্রয়োজনের জন্য এত সুন্দর কাজ করেছে, ধন্যবাদ!

— টাকাতালভী

এটি একটি ভাল টিপ। দেখে মনে হচ্ছে @ ভিউচিল্ডটি অ্যাংুলার 8 এ পরিবর্তিত হয়েছে, বা কমপক্ষে আমাকে ভিউচিল্ডের বিকল্পগুলি উল্লেখ করতে হবে। আমি এটি আমার ক্ষেত্রে ব্যবহার করেছি: @ ভিউচিল্ড (অন্যান্য, {স্থিতিশীল: মিথ্যা private) বেসরকারী অন্যান্য সামগ্রী: অন্যান্য;

— টোর অরস্টাদ

Answer 4

এই ইনপুটটিতে পিতামাতাকে বাঁধতে অনুমতি দেওয়ার জন্য আপনার সন্তানের উপাদানগুলিতে @ ইনপুট () সজ্জা ব্যবহার করুন।

সন্তানের উপাদানগুলিতে আপনি এটি ঘোষণা করেছেন:

@Input() myInputName: myType

সন্তানের কাছে পিতামাতার কাছ থেকে কোনও সম্পত্তি বাঁধতে আপনাকে অবশ্যই বাধ্যতামূলক বন্ধনী এবং তাদের মধ্যে আপনার ইনপুটটির নাম টেম্পলেট যুক্ত করতে হবে।

উদাহরণ:

<my-child-component [myChildInputName]="myParentVar"></my-child-component>

তবে সাবধান, অবজেক্টগুলি রেফারেন্স হিসাবে পাস করা হয়, তাই যদি সন্তানের মধ্যে অবজেক্টটি আপডেট করা হয় তবে পিতামাতার বর্ণ খুব আপডেট হবে। এটি কখনও কখনও কিছু অযাচিত আচরণের দিকে পরিচালিত করতে পারে। প্রাথমিক প্রকারের সাথে মানটি অনুলিপি করা হয়।

আরও যেতে এখানে পড়ুন:

দস্তাবেজ: https://angular.io/docs/ts/latest/cookbook/comp घटक- communication.html

Answer 5

পিতামাতার মধ্যে, আপনি @ ভিউচিল্ড ব্যবহার করে সন্তানের উল্লেখ করতে পারেন। যখন প্রয়োজন হয় (অর্থাত্‍ যখন ইভেন্টটি বহিস্কার করা হবে), আপনি কেবলমাত্র @ ভিউচিল্ড রেফারেন্সটি ব্যবহার করে পিতা-মাতার কাছ থেকে সন্তানের মধ্যে একটি পদ্ধতি কার্যকর করতে পারেন।