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>

콘솔에 기록됨:

'baz'
'bar'
'baz'

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

콘솔에 기록됨:

'bar'
undefined
undefined

그것은 흥미로운 주제이다.2개의 라이프 사이클 훅을 사용하여 동작 방법을 파악할 수 있습니다.ngOnChanges그리고.ngOnInit.

기본적으로 기본값을 다음과 같이 설정할 때Input즉, 해당 컴포넌트에 값이 없을 경우에만 사용됩니다.그리고 흥미로운 부분은 컴포넌트가 초기화되기 전에 변경될 것입니다.

이러한 컴포넌트가 2개의 라이프 사이클 훅과1개의 속성을 가지고 있다고 합시다.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

정의되지 않은 컴포넌트가 html에 포함되어 있습니다.property가치

그 결과 콘솔에 다음과 같이 표시됩니다.Init default

심술궂다onChange트리거되지 않았습니다.Init이 트리거되어property값은default역시나

상황 2

설정된 속성과 함께 html에 포함된 구성 요소 <cmp [property]="'new value'"></cmp>

그 결과 콘솔에 다음과 같이 표시됩니다.

Changed new value Object {}

Init new value

그리고 이건 흥미롭습니다.첫 번째가 트리거되었습니다.onChange훅을 설정했습니다.property로.new value이전 값이 빈 개체였습니다.그리고 그 후에야onInit훅이 새로운 값으로 트리거되었습니다.property.

이를 위한 최적의 솔루션은 다음과 같습니다.(ANGUAL All Version)

어드레싱 솔루션:@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);
  }
}

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