উপাদানটিতে আউটপুট উপস্থিত কিনা তা পরীক্ষা করুন

Question

নিম্নলিখিত উপাদান বিবেচনা করুন:

@Component({
  selector: 'app-test'
  template: 'Hello!'
}}
export class TestComponent {
  @Output() readonly selectionChange = new EventEmitter<SomeTypeHere>();
}

কল সহ:

<app-test (selectedChange)="selectedChangeHandler($event)"></app-test>

মনে রাখবেন যে আমি selectedChangeসঠিক আউটপুট নামের পরিবর্তে লিখেছি selectionChange। পতাকাযুক্ত strictTemplatesসক্ষম সহ কৌনিক 9 আমার মোটেও সহায়তা করেনি। এটি নিঃশব্দে ব্যর্থ হয়েছিল। মজাদার অংশটি হ'ল যদি আমি একই জিনিসটি করি @Inputতবে অ্যাপটি ত্রুটি (গুলি) ধরে এবং সংকলন করে না।

আমি যদি কোনও অনিবার্য "শ্রবণ" করার চেষ্টা করি তবে ত্রুটি ছুঁড়ে ফেলার কোনও উপায় আছে কি @Output?

Comments

অ্যাঙ্গুলারের পূর্ববর্তী সংস্করণগুলিতে কোনও ত্রুটি ছিল? আমি মনে করি এটি এতে কোনও ত্রুটি ছুঁড়েছিল না

— আরাভিন্ড ২

@ অরবিন্দ না, এটি কখনও ত্রুটি ছুঁড়েছে না। আমি জিজ্ঞাসা করছি এটি সম্ভব কিনা। আগাম ধন্যবাদ.

— dev_054

আপনি ত্রুটি নিক্ষেপ করতে চান কেন? একটি নির্দিষ্ট প্রয়োজন আছে? আমি আপনার প্রশ্নটি বোঝার চেষ্টা করছি

— অরবিন্দ

@ অরবিন্দ ভাল, আমি অনেক বিকাশকারীদের সাথে একটি এন্টারপ্রাইজ অ্যাপ্লিকেশনটিতে কাজ করছি, সুতরাং কোনও ধরণের তথ্য / সতর্কতা / ত্রুটি থাকা গুরুত্বপূর্ণ। কখনও কখনও কেউ @Output()একটি ভাগ করে নেওয়া লিবিতে, এমনকি অ্যাপ্লিকেশনটিতে একটি পরিবর্তন / মুছে ফেলতে এবং কলগুলি সরিয়ে দিতে ভুলে যায় ... এবং আমাদের যেমন সংকলন ত্রুটি নেই, @Input()ঠিক তেমন কারণেই আমরা নির্দিষ্ট সমস্যার কারণ খুঁজে পাই না (বা এমনকি কোডটিতে আবর্জনা না রাখার জন্য)। ইউনিট পরীক্ষা সহায়ক হতে পারে? হতে পারে, তবে সময়ের কারণে এখনও সম্ভব হয়নি।

— dev_054

Answer 1

কারণ নিহিত কোন ত্রুটি আছে ঘটনা বাঁধাই কৌণিক সঙ্গে না শুধুমাত্র ব্যবহার করা হয় @Outputs এবং EventEmitterগুলি, কিন্তু শোনার জন্য DOM ইভেন্টগুলি যেমন click, keyupইত্যাদি এটি এমনকি শোনার জন্য ব্যবহার করা যেতে পারে কাস্টম ঘটনা । উদাহরণস্বরূপ, যদি আপনি সন্তানের উপাদানগুলিতে একটি কাস্টম ইভেন্ট তৈরি এবং নির্গত করেন:

constructor (private el: ElementRef) {}
ngOnInit(): void {
    const domEvent = new CustomEvent('selectedChange', { custom: true });
    this.el.nativeElement.dispatchEvent(domEvent);
}

তারপরে অভিভাবক উপাদানটিতে আপনি এটির নামটি ধরতে পারেন:

<app-test (selectedChange)="selectedChangeHandler($event)"></app-test>

কৌণিক লক্ষ্যবস্তু.এডএভেন্টলিস্টনার ব্যবহার করে (প্রকার, শ্রোতা [, বিকল্পসমূহ]); অভ্যন্তরীণভাবে (আপনি এটি নীচের লিঙ্কগুলির দিকে লক্ষ্য করে নিশ্চিত করতে পারেন), যেখানে typeকোনও স্ট্রিং থাকতে পারে।

এই কারণেই এটি যদি কোনও মিল খুঁজে পাচ্ছে না তবে এটি কোনও ব্যতিক্রম ছুঁড়ে না @Output।

listenToElementOutputs

DefaultDomRenderer2.listen

EventManager.addEventListener

DomEventsPlugin.addEventListener

Comments

আরে @ কিরিল সিমোনভ আপনার উত্তরের জন্য ধন্যবাদ! ঠিক আছে, আপনার বক্তব্যটি গ্রহণ করে: "কোনও ত্রুটি নিক্ষেপ করা হয়নি কারণ অ্যাঙ্গুলারে ইভেন্ট বাঁধাই কেবল @ আউটপুটস এবং ইভেন্টইমিটারগুলির সাথেই ব্যবহৃত হয় না, তবে ক্লিক, কীআপ ইত্যাদির মতো DOM ইভেন্টগুলি শুনতে" কেন আপনি যদি পাস করেন তবে একটি অবিদ্যমান @Input(): (মনে রাখবেন যে ইনপুট একই বৈশিষ্ট্য থাকে কিছু বিশ্বব্যাপী হতে পারে disabled, idকৌণিক ছুড়ে ফেলে ত্রুটি, ইত্যাদি)? এটি কেন কাজ করে @Inputতবে এর জন্য নয় @Output? এছাড়াও, আমি যদি অনির্দিষ্টতা @Outputপাস হয়ে যায় তবে সতর্কতা / নিক্ষেপ করার কোনও উপায় অনুসন্ধান করার চেষ্টা করছি ।

— dev_054

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

— কিরিল সাইমনভ

@ dev_054 মনে রাখবেন যে আপনি এইচটিএমএল বৈশিষ্ট্যগুলি ব্যবহার করে ওয়ান-ওয়ে বাইন্ডিংও ব্যবহার করতে পারেন, এক্ষেত্রে কোনও ত্রুটিও [attr.any-attribute]ফেলে দেওয়া হবে না।

— কিরিল সাইমনভ

Answer 2

আপনার সমস্যার সরাসরি কোনও সমাধান নেই, তবে কিছু ক্ষেত্রে beেকে রাখা যায়।

1. আপনার যদি এমন কোনও আউটপুট থাকে যা বোতাম clickইভেন্টের মতো 100% জায়গাতে ব্যবহৃত হয় তবে আপনি এটিকে নির্বাচকটির অংশ হিসাবে তৈরি করতে পারেন selector: 'app-test[selectionChange]'। এছাড়াও আপনি এটি উদাহরণস্বরূপ করতে পারেন: selector: 'app-test[selectionChange]', app-test[click]'অর্থ clickবা selectionChangeপ্রয়োজনীয়।
2. আপনি যদি কোডটি রিফ্যাক্টর করে থাকেন এবং আউটপুটটির পুনরায় নামকরণ selectionChangeকরেন selectedChangeতবে selector: 'app-test:not([selectionChange])'ব্যবহারকারীদের আপডেট করতে বাধ্য করতে : আপনি এই নির্বাচকটি ব্যবহার করতে পারেন ।

Answer 3

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

Comments

আপনার নমুনা একটি @ ইনপুট দেখায়। কারণ @Output, কৌণিক ভাষা পরিষেবা কোনও কাজে সহায়তা করে না। আপনার যদি প্রশ্নটি পরিষ্কার করার দরকার হয় তবে আমাকে জানান।

— dev_054

একটির জন্য @Outputআপনি একই ত্রুটি বার্তা দেখতে পাবেন।

— srgrcp