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

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

---

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>

// Logged to console: 
// 'baz'
// 'bar'
// 'baz'

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

// Logged to console: 
// '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.

참고 URL : https://stackoverflow.com/questions/36071942/how-to-set-default-values-for-angular-2-component-properties