타입스크립트로 Angular에서 @Directives(@Components)에 여러 파라미터를 전달하는 방법?

타입스크립트로 Angular에서 @Directives(@Components)에 여러 파라미터를 전달하는 방법?

내가 만들었기 때문에@Directive~하듯이SelectableDirective, 사용자 지정 지침에 둘 이상의 값을 전달하는 방법에 대해 약간 혼란스럽습니다.저는 많이 검색했지만 Angular with Typescript에서 적절한 해결책을 얻지 못했습니다.

제 샘플 코드는 다음과 같습니다.

상위 구성 요소:MCQComponent:

import { Component, OnInit } from '@angular/core';
import { Question } from '../question/question';
import { AppService } from '../app.service/app.service';
import { SelectableDirective } from '../selectable.directive/selectable.directive';
import { ResultComponent } from '../result-component/result.component';

@Component({
    selector: 'mcq-component',
    template: "
         .....
        <div *ngIf = 'isQuestionView'>
            <ul>
                <li *ngFor = 'let opt of currentQuestion.options' 
                    [selectable] = 'opt'
                    (selectedOption) = 'onOptionSelection($event)'>
                    {{opt.option}}
                </li>
            </ul>
            .....
        </div>

    "
    providers: [AppService],
    directives: [SelectableDirective, ResultComponent]
})
export class MCQComponent implements OnInit{
    private currentIndex:any = 0;
    private currentQuestion:Question = new Question();
    private questionList:Array<Question> = [];
    ....
    constructor(private appService: AppService){}
    ....
}

이 구성 요소는 opt라는 하나의 매개 변수를 사용하는 사용자 지정 지시 [선택 가능]을 가진 상위 구성 요소입니다.

이 지침의 코드는 다음과 같습니다.

import { Directive, HostListener, ElementRef, Input, Output, EventEmitter } from '@angular/core'
import { Question } from '../question/question';

@Directive({
    selector: '[selectable]'
})
export class SelectableDirective{
    private el: HTMLElement;
    @Input('selectable') option:any;

    ...
}

그래서 여기서는 상위 구성 요소에서 더 많은 매개 변수를 전달하고자 합니다. 어떻게 하면 이를 달성할 수 있을까요?

설명서에서

구성 요소의 경우와 마찬가지로 템플릿에서 문자열을 함께 지정 속성 바인딩을 필요한 만큼 추가할 수 있습니다.

입력 속성을 에 추가합니다.HighlightDirective불렀다defaultColor:

@Input() defaultColor: string;

마크업

<p [myHighlight]="color" defaultColor="violet">
  Highlight me too!
</p>

앵귤러는 그것을 알고 있습니다.defaultColor구속력은 에 속합니다.HighlightDirective당신이 그것을 공개했기 때문에.@Input장식가

어느 쪽이든,@Input데코레이터는 Angular에게 이 속성이 공개되어 있으며 상위 구성 요소에 의해 바인딩할 수 있다고 말합니다.없이.@Input, Angular가 속성에 바인딩하기를 거부합니다.

예를 들어,

많은 매개변수와 함께

에 속성 추가Directive와 같은 부류의@Input()장식가

@Directive({
    selector: '[selectable]'
})
export class SelectableDirective{
    private el: HTMLElement;

    @Input('selectable') option:any;   
    @Input('first') f;
    @Input('second') s;

    ...
}

그리고 템플릿에서 당신에게 바운드된 속성을 전달됩니다.li요소

<li *ngFor = 'let opt of currentQuestion.options' 
    [selectable] = 'opt' 
    [first]='YourParameterHere'
    [second]='YourParameterHere'
    (selectedOption) = 'onOptionSelection($event)'>
    {{opt.option}}
</li>

여기에li우리는 이름을 가진 지시문을 가지고 있습니다.selectable.에서selectable두개가 있습니다.@Input()의,f이름을 걸고first그리고.s이름을 걸고second. 우리는 이 두 가지를 적용했습니다.li이름 있는 속성[first]그리고.[second]. 그리고 우리의 지시는 이 속성들을 발견할 것입니다.li그를 위해 준비된 요소.@Input()데코레이터. 그래서.selectable,[first]그리고.[second]에 대한 모든 지시에 구속될 것입니다.li, 이 이름들을 가진 재산을 가지고 있습니다.

단일 파라미터로

@Directive({
    selector: '[selectable]'
})
export class SelectableDirective{
    private el: HTMLElement;

    @Input('selectable') option:any;   
    @Input('params') params;

    ...
}

마크업

<li *ngFor = 'let opt of currentQuestion.options' 
    [selectable] = 'opt' 
    [params]='{firstParam: 1, seconParam: 2, thirdParam: 3}'
    (selectedOption) = 'onOptionSelection($event)'>
    {{opt.option}}
</li>

여러 옵션을 전달하려면 한 줄의 사용자 지정 데이터가 있는 @Input 데코레이터에 개체를 전달할 수 있습니다.

템플릿에서

<li *ngFor = 'let opt of currentQuestion.options' 
                [selectable] = 'opt'
                [myOptions] ="{first: opt.val1, second: opt.val2}" // these are your multiple parameters
                (selectedOption) = 'onOptionSelection($event)' >
     {{opt.option}}
</li>

그래서 지시 시간에

@Directive({
  selector: '[selectable]'
})

export class SelectableDirective{
  private el: HTMLElement;
  @Input('selectable') option:any;
  @Input('myOptions') data;

  //do something with data.first
  ...
  // do something with data.second
}

또 다른 깔끔한 옵션은 사용하는 것입니다.Directive속성이 아닌 요소로서.

@Directive({
   selector: 'app-directive'
})
export class InformativeDirective implements AfterViewInit {

    @Input()
    public first: string;

    @Input()
    public second: string;

    ngAfterViewInit(): void {
       console.log(`Values: ${this.first}, ${this.second}`);
    }
}

그리고 이 지침은 다음과 같이 사용될 수 있습니다.

<app-someKindOfComponent>
    <app-directive [first]="'first 1'" [second]="'second 1'">A</app-directive>
    <app-directive [first]="'First 2'" [second]="'second 2'">B</app-directive>
    <app-directive [first]="'First 3'" [second]="'second 3'">C</app-directive>
</app-someKindOfComponent>`

심플하고 깔끔하고 파워풀합니다.

내가 사용한 위의 솔루션과 유사합니다.@Input()명령어에서 여러 개의 값 배열을 전달할 수 있습니다.

selector: '[selectorHere]',

@Input() options: any = {};

input.html

<input selectorHere [options]="selectorArray" />

TS 파일에서 배열

selectorArray= {
  align: 'left',
  prefix: '$',
  thousands: ',',
  decimal: '.',
  precision: 2
};

언급URL : https://stackoverflow.com/questions/38843532/how-to-pass-multiple-parameter-to-directives-components-in-angular-with-type