কৌণিক 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);
  }

}

পরিস্থিতি ঘ

সংজ্ঞায়িত propertyমান ব্যতীত html- এ অন্তর্ভুক্ত উপাদান

ফলস্বরূপ আমরা কনসোলে দেখতে পাব: Init default

এর অর্থ onChangeট্রিগার করা হয়নি। উদ্যোগ ট্রিগার করা হয়েছিল এবং প্রত্যাশার মতো propertyমান default।

পরিস্থিতি 2

সংযুক্ত সম্পত্তি সহ এইচটিএমএলে অন্তর্ভুক্ত উপাদান <cmp [property]="'new value'"></cmp>

ফলস্বরূপ আমরা কনসোলে দেখতে পাব:

Changed new value Object {}

Init new value

এবং এই এক আকর্ষণীয়। প্রথমত আলোড়ন সৃষ্টি ছিল onChangeহুক, যা setted propertyকরতে new valueএবং পূর্ববর্তী মান ছিল খালি বস্তুর ! এবং কেবলমাত্র সেই onInitহুকের নতুন মান সহ ট্রিগার হয়েছিল property।

Question 3

এটির জন্য সেরা সমাধান এখানে। (আঙ্গুলের সমস্ত সংস্করণ)

সম্বোধনের সমাধান : @ ইনপুট ভেরিয়েবলের জন্য একটি ডিফল্ট মান সেট করতে । যদি কোনও ইনপুট ভেরিয়েবলের কোনও মান পাস করা হয় না তবে এটি ডিফল্ট মানটি গ্রহণ করবে ।

আমি এই জাতীয় অনুরূপ প্রশ্নের সমাধান সরবরাহ করেছি। আপনি এখানে থেকে সম্পূর্ণ সমাধান খুঁজে পেতে পারেন

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);
  }
}