web-dev-qa-db-ja.com

TypeScriptでAngularの@Directives（@Components）に複数のパラメーターを渡す方法は？

@DirectiveをSelectableDirectiveとして作成したので、カスタムディレクティブに複数値を渡す方法について少し混乱しています。私はたくさん検索しましたが、Angularで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){}
    ....
}

これは、カスタムディレクティブ[selectable]を持つ親コンポーネントです。これはoptという1つのパラメーターを取ります。

このディレクティブのコードは次のとおりです。

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;

    ...
}

だからここで親からのより多くのパラメータコンポーネントを渡したいのですが、どうすればこれを達成できますか？

javascriptangulartypescriptangular6
52
Shree

Documentation から

コンポーネントの場合と同様に、テンプレート内で文字列化することにより、必要な数のディレクティブプロパティバインディングを追加できます。

入力プロパティをHighlightDirectiveというdefaultColorという名前に追加します。

@Input() defaultColor: string;

Markup

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

Angularは、@Inputデコレータで公開したため、defaultColorバインディングがHighlightDirectiveに属していることを知っています。

いずれにしても、@Inputデコレータは、このプロパティがパブリックであり、親コンポーネントによるバインドに利用可能であることをAngularに伝えます。 @Inputがない場合、Angularはプロパティへのバインドを拒否します。

あなたの例

多くのパラメータを使用して

@Input()デコレータを使用してプロパティをDirectiveクラスに追加します

@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には、fという名前のfirstとsという名前のsecondという2つの@Input()があります。 [first]および[second]という名前のliプロパティにこれら2つを適用しました。ディレクティブは、li要素でこれらのプロパティを検索し、@Input()デコレータで設定されます。したがって、selectable、[first]、および[second]は、これらの名前のプロパティを持つliのすべてのディレクティブにバインドされます。

単一パラメータ付き

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

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

    ...
}

Markup

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

多くのオプションを渡すには、オブジェクトを1行のカスタムデータで@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
}
11
Dag

別の適切なオプションは、属性としてではなく要素として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>`

シンプル、きちんとした、強力。

3
Aharon Ohayon

上記のソリューションと同様に、ディレクティブで@Input()を使用し、ディレクティブで値の複数の配列を渡すことができました。

selector: '[selectorHere]',

@Input() options: any = {};

Input.html

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

TSファイルからの配列

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