कोणीय 2 घटक गुणों के लिए डिफ़ॉल्ट मान कैसे सेट करें?

Question 1

कोणीय 2.0 घटकों को लिखते समय, गुणों के लिए डिफ़ॉल्ट मान कैसे सेट करता है?

उदाहरण के लिए - मैं सेट करना चाहते fooकरने के लिए 'bar'डिफ़ॉल्ट रूप से, लेकिन बाध्यकारी हो सकता है तुरंत करने के लिए हल 'baz'। यह जीवन चक्र हुक में कैसे खेलता है?

@Component({  
    selector: 'foo-component'
})
export class FooComponent {
    @Input()
    foo: string = 'bar';

    @Input()
    zalgo: string;

    ngOnChanges(changes){
          console.log(this.foo);
          console.log(changes.foo ? changes.foo.previousValue : undefined);
          console.log(changes.foo ? changes.foo.currentValue : undefined);
    }
}

निम्नलिखित टेम्पलेट्स को देखते हुए, यह वही है जो मुझे लगता है कि मान होगा। क्या मै गलत हु?

<foo-component [foo] = 'baz'></foo-component>

कंसोल पर लॉग इन करें:

'baz'
'bar'
'baz'

<foo-component [zalgo] = 'released'></foo-component>

कंसोल पर लॉग इन करें:

'bar'
undefined
undefined

Question 2

यह दिलचस्प विषय है। आप यह पता लगाने की यह कैसे काम करता दो जीवन चक्र हुक के साथ चारों ओर खेल सकते हैं: ngOnChangesऔर ngOnInit।

मूल रूप से जब आप डिफ़ॉल्ट मान को सेट करते हैं तो Inputइसका मतलब है कि इसका उपयोग केवल उस स्थिति में किया जाएगा जब उस घटक पर कोई मूल्य नहीं होगा। और घटक शुरू होने से पहले दिलचस्प हिस्सा इसे बदल दिया जाएगा।

मान लें कि हमारे पास दो जीवन चक्र हुक और एक संपत्ति से आने वाले ऐसे घटक हैं input।

@Component({
  selector: 'cmp',
})
export class Login implements OnChanges, OnInit {
  @Input() property: string = 'default';

  ngOnChanges(changes) {
    console.log('Changed', changes.property.currentValue, changes.property.previousValue);
  }

  ngOnInit() {
    console.log('Init', this.property);
  }

}

स्थिति 1

परिभाषित propertyमूल्य के बिना HTML में घटक शामिल हैं

परिणामस्वरूप हम कंसोल में देखेंगे: Init default

इसका मतलब onChangeयह नहीं था कि ट्रिगर किया गया। Init ट्रिगर किया गया था और propertyमूल्य defaultउम्मीद के मुताबिक है।

स्थिति 2

एचटीएमएल में निगमित संपत्ति के साथ घटक <cmp [property]="'new value'"></cmp>

परिणामस्वरूप हम कंसोल में देखेंगे:

Changed new value Object {}

Init new value

और यह एक दिलचस्प है। सबसे पहले ट्रिगर किया गया था onChangeहुक, जो setted propertyलिए new value, और पिछले मूल्य था खाली ऑब्जेक्ट ! और उसके बाद ही onInitहुक को नए मूल्य के साथ चालू किया गया था property।

Question 3

यहाँ इसके लिए सबसे अच्छा समाधान है। (ANGULAR सभी संस्करण)

समाधान को संबोधित करना : @Input चर के लिए एक डिफ़ॉल्ट मान सेट करना । यदि कोई मूल्य उस इनपुट वैरिएबल को पारित नहीं किया गया तो यह डिफ़ॉल्ट मान लेगा ।

मैंने इस तरह के समान प्रश्न के लिए समाधान प्रदान किया है। आप यहाँ से पूरा समाधान पा सकते हैं

export class CarComponent implements OnInit {
  private _defaultCar: car = {
    // default isCar is true
    isCar: true,
    // default wheels  will be 4
    wheels: 4
  };

  @Input() newCar: car = {};

  constructor() {}

  ngOnInit(): void {

   // this will concate both the objects and the object declared later (ie.. ...this.newCar )
   // will overwrite the default value. ONLY AND ONLY IF DEFAULT VALUE IS PRESENT

    this.newCar = { ...this._defaultCar, ...this.newCar };
   //  console.log(this.newCar);
  }
}