Làm cách nào để đặt giá trị mặc định cho các thuộc tính thành phần Angular 2?

Khi viết các thành phần Angular 2.0, làm cách nào để đặt giá trị mặc định cho các thuộc tính?

Ví dụ - tôi muốn đặt foothành 'bar'theo mặc định, nhưng ràng buộc có thể giải quyết ngay lập tức thành 'baz'. Điều này diễn ra như thế nào trong các móc vòng đời?

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

Với các mẫu sau, đây là những gì tôi mong đợi các giá trị sẽ là. Tôi có lầm không?

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

Đã đăng nhập vào bảng điều khiển:

'baz'
'bar'
'baz'

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

Đã đăng nhập vào bảng điều khiển:

'bar'
undefined
undefined

Đó là chủ đề thú vị. Bạn có thể thử với hai móc vòng đời để tìm ra cách hoạt động của nó: ngOnChangesvà ngOnInit.

Về cơ bản khi bạn đặt giá trị mặc định thành giá trị Inputđó có nghĩa là nó sẽ chỉ được sử dụng trong trường hợp không có giá trị nào đến trên thành phần đó. Và phần thú vị là nó sẽ được thay đổi trước khi thành phần được khởi tạo.

Giả sử chúng ta có các thành phần như vậy với hai móc vòng đời và một thuộc tính đến từ 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);
  }

}

Tình huống 1

Thành phần được bao gồm trong html mà không có propertygiá trị xác định

Kết quả là chúng ta sẽ thấy trong bảng điều khiển: Init default

Điều đó có nghĩa là onChangeđã không được kích hoạt. Init đã được kích hoạt và propertygiá trị defaultnhư mong đợi.

Tình huống 2

Thành phần bao gồm trong html với thuộc tính setted <cmp [property]="'new value'"></cmp>

Kết quả là chúng ta sẽ thấy trong bảng điều khiển:

Changed new value Object {}

Init new value

Và điều này là thú vị. Đầu tiên là onChangehook được kích hoạt , được đặt propertythành new value, và giá trị trước đó là đối tượng trống ! Và chỉ sau khi onInithook đó được kích hoạt với giá trị mới là property.

Đây là giải pháp tốt nhất cho điều này. (ANGULAR Tất cả các phiên bản)

Giải pháp khắc phục : Để đặt giá trị mặc định cho biến @Input . Nếu không có giá trị nào được truyền cho biến đầu vào đó thì Nó sẽ nhận giá trị mặc định .

Tôi đã cung cấp giải pháp cho loại câu hỏi tương tự. Bạn có thể tìm thấy giải pháp đầy đủ từ đây

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