[解決済み] Angularの@Directives(@Components)にTypeScriptで複数のパラメータを渡すには？

質問

私は @Directive として SelectableDirective を渡す方法について、私は少し混乱しています。 を渡す方法についてです。 の値をカスタムディレクティブに渡す方法についてです。私はたくさん探しましたが、適切な解決策は得られませんでした。 Angular で タイプスクリプト .

私のサンプルコードはこんな感じです。

親コンポーネントを 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 デコレータは、このプロパティが public であり、親コンポーネントからバインド可能であることを 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() 's, f という名前で first と s という名前で second . この2つを 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>