각도 2의 입력 장식자를 통해 여러 속성 사용하기

Question

이 선택기를 통해 두 개의 입력을받는이 구성 요소를 가지고 있지만 입력 및 구성 요소의 수에 관계없이이 구성 요소를 확장 할 수 있습니다. 따라서 구성 요소 자체에서 여러 속성을 사용하려고하면 하나의 @Input() 데코레이터에서 여러 속성을 사용할 수 없으므로 두 개의 입력 속성에 두 개의 데코레이터를 사용했지만이 방법이 유일한 방법은 아닌 것 같습니다. 그러한 시나리오를 다루십시오.

export class AsyncComponent { 
    @Input() waitFor: boolean; 
    @Input() message: string; // TODO: Verify if multiple inputs are needed for multiple props 
} 

업데이트는 그래서입니다

<app-async [waitFor]="true" message="foo"><app-async> 

는 입력 소품의 번호를 하나의 장식을 사용하는 다른 방법으로 가능하다? waitFor 및 message 이외의 다른 소품이 있다면 각 소품마다 다음을 수행해야합니다.

@Input() waitFor: boolean; 
@Input() message: string; 
@Input() someOtherProp: string; 
.... 

하거나 속성의 수를 하나 개 Input 장식을하고 소비하는 다른 방법은 무엇입니까? 여러 값을

이

난 그냥 하나의 오브젝트 (안 배열)을 통과 할 것

export class AsyncComponent { 
    @Input() props: any[]; 

Answer 1

내가 로마 C.에 동의 배열이나 뭔가를 사용해야하는 경우

Answer 2

그것은 모든 소품을 포함하는 것은 불가능 :

@Component({ 
    selector: 'app-async' 
}) 
export class AsyncComponent { 
    // Single object with all props. 
    @Input() props: { waitFor: boolean; message: string; }; 
} 

그리고 다음 부모 요소 :

@Component({ 
    template: '<app-async [props]="myProps"><app-async>' 
}) 
export class ParentComponent { 
    myProps = { waitFor: true, message: 'foo' }; 
} 

NB. 입력 속성에서 선언 된 인터페이스는 실행되지 않습니다. 여전히 선언하는 것이 가장 좋지만 JavaScript는 TypeScript 인터페이스를 런타임에 확인할 수 없습니다. 이 주석은이 스레드의 모든 코드 샘플 (단일 입력, 다중 입력 ...)에 적용됩니다.