[angular] Angular 2 구성 요소 속성의 기본값을 설정하는 방법은 무엇입니까?

Program / 글쓴이

Angular 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

답변

흥미로운 주제입니다. 당신은 어떻게 작동하는지 알아 내기 위해 두 개의 라이프 사이클 후크 함께 놀러 수 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가 트리거되지 않았습니다. 초기화가 트리거되었으며 property값이 default예상대로입니다.

상황 2

setted 속성이있는 html에 포함 된 구성 요소 <cmp [property]="'new value'"></cmp>

결과적으로 콘솔에서 볼 수 있습니다.

Changed new value Object {}

Init new value

그리고 이것은 흥미 롭습니다. 첫째 트리거 된 onChange잘 살고 후크, property에 new value, 그리고 이전 값이었다 빈 객체 ! 그리고 그 onInit후크가 새 값으로 트리거 된 후에 만 property.

답변

여기에 가장 적합한 솔루션이 있습니다. (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);
  }
}

답변