অ্যাঙ্গুলার 2 @ গেট / সেট সহ কোনও সম্পত্তি ইনপুট করুন


178

আমার কাছে সেই উপাদানটিতে একটি কৌণিক 2 উপাদান রয়েছে এটির কাছে বর্তমানে একটি গুচ্ছ ক্ষেত্র রয়েছে যা এই সম্পত্তিটির সাথে আবদ্ধ হওয়ার অনুমতি দেওয়ার জন্য তাদের আগে @ ইনপুট () প্রয়োগ করেছে

@Input() allowDay: boolean;

আমি যা করতে চাই তা আসলে গেট / সেট সহ কোনও সম্পত্তির সাথে আবদ্ধ হয়, যাতে আমি সেটারে অন্য কিছু যুক্তি করতে পারি, নীচের মতো কিছু

_allowDay: boolean;
get allowDay(): boolean {
    return this._allowDay;
}
set allowDay(value: boolean) {
     this._allowDay = value;
     this.updatePeriodTypes();
}

আমি Angular2 এ এটি কীভাবে করব?

থিয়েরি টেম্পিলারের পরামর্শের ভিত্তিতে আমি এটিকে পরিবর্তন করেছি, তবে এটি ত্রুটিটি 'অনুমতিডে'-তে আবদ্ধ করতে পারে না কারণ এটি কোনও পরিচিত দেশীয় সম্পত্তি নয়:

//@Input() allowDay: boolean;
_allowDay: boolean;
get allowDay(): boolean {
    return this._allowDay;
}
@Input('allowDay') set allowDay(value: boolean) {
    this._allowDay = value;
    this.updatePeriodTypes();
}

আপনি কীভাবে এবং কোথায় কীভাবে [allowDay]="....". If the field (setter) name and the property name you want to use for binding are the same, you can omit the parameter for @ ইনপুট (...) to এ আবদ্ধ হন `
গন্টার জ্যাচবাউয়ার

আপনি কীভাবে আপনার ইউনিট পরীক্ষাটি সেট আপ করবেন তা দেখার জন্য আমি আগ্রহী হব যদি আপনি গৃহীত উত্তরের মতো প্রদর্শিত সেট সেট ব্যবহারের পথে চলে যান।
উইনেমুকা

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

উত্তর:


271

আপনি নীচে বর্ণিত হিসাবে সরাসরি সেটারে @ ইনপুট সেট করতে পারেন:

_allowDay: boolean;
get allowDay(): boolean {
    return this._allowDay;
}

@Input('allowDay')
set allowDay(value: boolean) {
    this._allowDay = value;
    this.updatePeriodTypes();
}

এই plunkr দেখুন: https://plnkr.co/edit/6miSutgTe9sfEMCb8N4p?p= পূর্বরূপ দেখুন ।


1
আমি নিম্নলিখিত ত্রুটিটি পেয়ে যাচ্ছি 'অনুমতিডে'-তে বাঁধাই করতে পারি না কারণ এটি কোনও পরিচিত দেশীয় সম্পত্তি নয়। আমি কোডটি ঠিক কীভাবে পরিবর্তন করেছি তার জন্য আপডেট প্রশ্নটি দেখুন
পল ক্যাভাকাস

তুমি কি নিশ্চিত? এটা আমার জন্য কাজ করে. আমি একটি plunkr যোগ। আপনি directivesযে উপাদানটি এটি ব্যবহার করতে চান সেটির বৈশিষ্ট্যে আপনি নির্দেশটি যুক্ত করতে ভুলে গেছেন ... আমি আমার উত্তর আপডেট করেছি।
থিয়েরি টেম্পিলার

2
এটি একটি খারাপ ধারণা কারণ আপনি যদি সেটারটি ব্যবহার করেন তবে এনজিওনচেনজগুলি গুলি চালায় না।
ব্যবহারকারী 2867288


11
সতর্কতা : মানগুলি রূপরেখাগুলি দ্বারা রূপান্তরিত দ্বারা রূপান্তরিত setterহবে না (উদাহরণস্বরূপ একটি অ্যারের দিকে ঠেলা, কোনও বস্তুকে রূপান্তর করা, ইত্যাদি)। আবার ট্রিগার করার Inputজন্য setterআপনাকে পুরো মানটি পাস হিসাবে প্রতিস্থাপন করতে হবে।
নিকফথিম

61

আপনি যদি কেবল সেটারে যুক্তি প্রয়োগ করতে আগ্রহী হন :

import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';

// [...]

export class MyClass implements OnChanges {
  @Input() allowDay: boolean;

  ngOnChanges(changes: SimpleChanges): void {
    if(changes['allowDay']) {
      this.updatePeriodTypes();
    }
  }
}

আমদানি SimpleChangesকোন ইনপুট সম্পত্তি পরিবর্তন করা হয়েছে বা আপনার যদি কেবল একটি ইনপুট সম্পত্তি থাকে তা বিবেচনা করে না হলে প্রয়োজন হয় না।

কৌণিক ডক: অনচেঞ্জস

অন্যথায়:

private _allowDay: boolean;

@Input() set allowDay(value: boolean) {
  this._allowDay = value;
  this.updatePeriodTypes();
}
get allowDay(): boolean {
  // other logic
  return this._allowDay;
}

শুধু কৌতূহলী, আপনি যদি কেবল সেতার যুক্তির প্রতি আগ্রহী হন তবে এনজিওনচেন্জ বনাম সেট সম্পত্তিটি ব্যবহার না করে কী লাভ আছে?
মেসে

4
"এনজিওনচেঞ্জ বনাম বনাম সেট না ব্যবহার করা" তে কোনও পার্থক্য নেই ...;) একপাশে মন্তব্য করা: একটি সুবিধা হ'ল যদি আপনার উপাদানটির একাধিক @Inputবৈশিষ্ট্য থাকে এবং আপনি যখন কোনওটির পরিবর্তিত হয়ে থাকেন তখন আপনি একটি রুটিন কল করতে চান। তাই কম কোড দরকার।
মার্টিন স্নাইডার

উপস, একটি টাইপো hehe ছিল। তবে ঠিক আছে, ভেবেছিলাম এর আরও প্রাসঙ্গিকতা থাকতে পারে। উত্তরের জন্য ধন্যবাদ :)
মেজে

1
@ এমএ-মাদদিন আমি মনে করি আপনি যদি একই সময়ে একাধিক পরিবর্তন আশা করে থাকেন যার ফলে প্রতিটি একটি রুটিন চালানোর প্রয়োজন হয় তবে আপনিও একটি নিরীক্ষণযোগ্য পর্যবেক্ষণযোগ্য সেট করতে পারেন।
সাইমন_উইভার

এনজিওচেনজ অ্যাপ্রোচ দুর্দান্ত! ভাল উত্তর. মান নির্ধারণ করা যদি ব্যক্তিগত না হতে পারে যেমন এটি টেমপ্লেটে বাঁধাই হিসাবে ব্যবহৃত হয় তবে _ প্রপার্টি নাম সেটার / ব্যক্তিগত নামকরণ কনভেনশনটি বেমানান হয়ে যায়। ngOnChanges এই পুরোপুরি চারপাশের পায়
Drenai

8

@ পল কাভাকাস, আমারও একই সমস্যা ছিল এবং আমি Input()সাজসজ্জার উপরে সাজসজ্জার সেট করে সমাধান করেছি ।

  @Input('allowDays')
  get in(): any {
    return this._allowDays;
  }

  //@Input('allowDays')
  // not working
  set in(val) {
    console.log('allowDays = '+val);
    this._allowDays = val;
  }

এই নিমজ্জনকারী দেখুন: https://plnkr.co/edit/6miSutgTe9sfEMCb8N4p?p= পূর্বরূপ দেখুন


6
এই বাগটি আমাকে পাগল করেছে, অবশেষে আমি দেখতে পেলাম যে আপনাকে প্রথমে ইনপুট (গেটর বা সেটার তবে ইনপুট ডিকোরিটারটি অবশ্যই এগিয়ে যেতে হবে)
ম্যাক্সি-কোড

1
এখানে অন্যান্য রেফারেন্স যা https://github.com/angular/angular/issues/5477
ম্যাক্সি-কোড

1

স্ট্যাকব্লিটজে এখানে কৌনিক .0.০.১-এর গৃহীত উত্তর আপডেট হয়েছে: https://stackblitz.com/edit/angular-inputsetter?e એમ્બેડ=1&file=src/app/app.componal.ts

directivesকম্পোনেন্ট ডেকোরেটর বিকল্পগুলিতে আর নেই। তাই আমি অ্যাপ্লিকেশন মডিউলের উপ-নির্দেশনা সরবরাহ করেছি।

ধন্যবাদ @ থিয়েরি-টেম্প্লেয়ার !

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.