각도 2: 성분 상호 작용, 선택적 입력 매개 변수

각도 2: 성분 상호 작용, 선택적 입력 매개 변수

부모가 특정 데이터를 자식 구성 요소에 전달하려는 구현이 있습니다.@Input매개 변수를 하위 구성 요소에서 사용할 수 있습니다.그러나 이 데이터 전송은 선택 사항이며 부모는 요구 사항에 따라 데이터 전송을 통과하거나 통과하지 않을 수 있습니다.구성 요소에 선택적 입력 매개 변수를 둘 수 있습니까?아래에서 시나리오를 설명했습니다.

 <parent>
    <child [showName]="true"></child> //passing parameter
    <child></child> //not willing to passing any parameter
</parent>



//child component definition
@Component {
    selector:'app-child',
    template:`<h1>Hi Children!</h1>
          <span *ngIf="showName">Alex!</span>`
}


export class child {

    @Input showName: boolean;

    constructor() { }

}

아래와 같이 (?) 연산자를 사용할 수 있습니다.

import {Component,Input} from '@angular/core';
@Component({
    selector:'child',
    template:`<h1>Hi Children!</h1>
          <span *ngIf="showName">Alex!</span>`
})


export class ChildComponent {

    @Input() showName?: boolean;

    constructor() { }

}

하위 구성 요소를 사용하는 상위 구성 요소는 다음과 같습니다.

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>
      <child [showName]="true"></child>
      <child ></child>
    </div>
  `,
})
export class App {
  name:string;
  constructor() {
    this.name = 'Angular2'
  }
}

라이브 데모

입력 값은 기본적으로 선택 사항입니다.코드는 실제로 전달되지 않은 입력의 속성에 액세스하려고 할 때만 실패합니다.undefined).

OnChanges를 구현하거나 입력을 속성 대신 setter로 설정하여 값이 실제로 전달될 때 코드를 실행할 수 있습니다.

export class child {

    @Input set showName(value: boolean) {
      this._showName = value;
      doSomethingWhenShowNameIsPassed(value);
    }

    constructor() { }
}

여기에는 두 가지 옵션이 있습니다.

사용할 수 있습니다.*ngIf입력이 비어 있을 때 아이를 표시할 필요가 없는 경우 아이에게 표시합니다.

 <parent>
    <child *ngIf="true" [showName]="true"></child> //passing parameter
    <child></child> //not willing to passing any parameter
</parent>

아이가 입력 없이 표시될 경우 수정된 세터를 사용하여 입력 변수의 존재를 확인할 수 있습니다.

child.ts에서:

private _optionalObject: any;
@Input()
set optionalObject(optionalObject: any) {
    if(optionalObject) this._optionalObject = optionalObject;
}
get optionalObject() { return this._optionalObject; }

언급URL : https://stackoverflow.com/questions/39717083/angular-2-component-interaction-optional-input-parameters