Angular2 @Input के साथ एक संपत्ति प्राप्त करें / सेट करें

Question

मेरे पास उस घटक में एक Angular2 घटक है, जिसमें वर्तमान में एक गुच्छा फ़ील्ड है, जिसमें @Input () लागू है, जो उस संपत्ति के लिए बाध्य करने की अनुमति देने से पहले, अर्थात

@Input() allowDay: boolean;

जो मैं करना चाहता हूं वह वास्तव में प्राप्त / सेट के साथ एक संपत्ति के लिए बाध्य है, ताकि मैं सेटर में कुछ और तर्क कर सकूं, कुछ इस तरह से

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

मैं Angular2 में यह कैसे करूंगा?

Thierry Templier के सुझाव के आधार पर मैंने इसे बदल दिया, लेकिन यह त्रुटि 'थंडरडाय' को बांध नहीं सकती क्योंकि यह एक ज्ञात मूल संपत्ति नहीं है:

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

Comments

कैसे और कहाँ आप [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 @Input (...) `के लिए बाध्य करते हैं ।

— गुंटर ज़ोचबॉयर

मुझे यह देखने के लिए उत्सुक होना होगा कि यदि आपने स्वीकार किए गए उत्तर में दिखाए गए अनुसार सेट का उपयोग करने का मार्ग चला दिया तो आप अपनी इकाई परीक्षा को कैसे सेट करेंगे।

— विनीमुक्का

आप जो कुछ भी कर रहे हैं वह एक ब्रेकपॉइंट, या डिबग स्टेटमेंट, या अपने सेटर के अंदर काउंटर सुनिश्चित करने के लिए सुनिश्चित करें कि यह केवल एक बार फायरिंग है जैसा कि अपेक्षित है। मैंने पाया कि मेरा हर परिवर्तन का पता लगाने के लिए अद्यतन किया जा रहा था जो भयानक प्रदर्शन और विचित्र व्यवहार का कारण था।

— सिमोन_विवर

Answer 1

आप सेटर पर सीधे सेट कर सकते हैं, जैसा कि नीचे वर्णित है:

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

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

इस प्लंकर को देखें: https://plnkr.co/edit/6miSutgTe9sfEMCb8N4p?p=preview ।

Comments

मुझे निम्नलिखित त्रुटि मिलती है कि 'allowDay' को बांध नहीं सकते क्योंकि यह एक ज्ञात मूल संपत्ति नहीं है। अद्यतन किए गए प्रश्न को देखें कि मैंने कोड को किस में बदल दिया

— पॉल कैवाकास

क्या आपको यकीन है? इससे मेरा काम बनता है। मैंने एक प्लंकर जोड़ा। शायद आप directivesउस घटक की विशेषता में निर्देश जोड़ना भूल गए जहां आप इसका उपयोग करना चाहते हैं ... मैंने अपना उत्तर अपडेट किया।

— थिएरी टेम्पलर

यह एक बुरा विचार है क्योंकि यदि आप सेटर का उपयोग करते हैं, तो ngOnChanges फायर नहीं करता है।

— user2867288

कोणीय बुनियादी बातों के पन्नों पर

— पॉलको

चेतावनी : म्यूटेशन द्वारा उन मूल्यों को ट्रिगर नहीं किया setterजाएगा जो संदर्भ द्वारा पारित किए जाते हैं (यानी एक सरणी पर धक्का देना, किसी वस्तु को बदलना, आदि)। फिर से ट्रिगर करने के लिए आपको पूरे मूल्य को बदलने की आवश्यकता होगी । Inputsetter

— निकोफ्थाइम

Answer 2

यदि आप मुख्य रूप से केवल सेटर पर तर्क को लागू करने में रुचि रखते हैं :

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जरूरत नहीं है अगर यह मायने नहीं रखता कि कौन सी इनपुट संपत्ति बदली गई थी या यदि आपके पास केवल एक इनपुट संपत्ति है।

कोणीय डॉक्टर: OnChanges

अन्यथा:

private _allowDay: boolean;

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

Comments

बस जिज्ञासु, क्या कोई लाभ नहीं है ngOnChanges बनाम सेट संपत्ति का उपयोग नहीं करने के लिए यदि आप केवल एक सेटर लॉजिक पर रुचि रखते हैं?

— मेस

"एनकोऑन्चेज का उपयोग करना बनाम सेट का उपयोग नहीं करना" में कोई अंतर नहीं है ...;) एक तरफ मजाक कर रहा है: एक लाभ यह है, यदि आपके घटक में कई @Inputगुण हैं और आप उनमें से कोई भी बदलने पर एक रूटीन कॉल करना चाहते हैं। इतना कम कोड चाहिए।

— मार्टिन श्नाइडर

Ups, एक टाइपो hehe था। लेकिन ठीक है, सोचा कि इसकी अधिक प्रासंगिकता हो सकती है। उत्तर के लिए धन्यवाद :) :)

— Mese

@ MA-Maddin मुझे लगता है कि अगर आप एक ही समय में कई बदलावों की उम्मीद कर रहे थे, तो प्रत्येक परिणाम में एक बदलाव देखने योग्य हो सकता है, जिसे हर किसी को चलाने की आवश्यकता होगी।

— सिमोन_विवर

ngOnChanges दृष्टिकोण महान है !! अच्छा उत्तर। यदि सेट किया जा रहा मूल्य निजी नहीं हो सकता है जैसे कि इसे टेम्पलेट में बाइंडिंग के रूप में उपयोग किया जाता है, तो _propertyName सेटर / निजी नामकरण सम्मेलन असंगत हो जाता है। ngOnChanges लगभग पूरी तरह से मिल जाता है

— Drenai

Answer 3

@ पाऊल कैवाकास, मेरे पास एक ही मुद्दा था और मैंने गेट्टर के 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=preview

Comments

इस बग ने मुझे पागल कर दिया, मैंने अंततः पाया कि आपको पहले इनपुट () को परिभाषित करना चाहिए (गेट्टर या सेटर लेकिन इनपुट डेकोरेटर को पहले जाना चाहिए)

— मैक्सी-कोड

यहाँ अन्य संदर्भ हैं जो https://github.com/angular/angular/issues/5477

— मैक्सी-कोड

Answer 4

स्टैकब्लिट्ज़ पर कोणीय 7.0.1 के अपडेट किए गए उत्तर को यहां देखें: https://stackblitz.com/edit/angular-inputsetter?embed=1&file=src/app/app.component.ts

directivesघटक डेकोरेटर विकल्पों में अधिक नहीं हैं। इसलिए मैंने ऐप मॉड्यूल को उप निर्देश प्रदान किया है।

धन्यवाद @ थियरी-TEMPLIER !