86

@Directiveasを作成したので、カスタム ディレクティブに複数の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という 1 つのパラメーターを取るカスタム ディレクティブ[selectable]を持つ親コンポーネントです。

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

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;

    ...
}

ここで、親コンポーネントからさらにパラメーターを渡したいのですが、どうすればこれを達成できますか?

4

4 に答える 4

137

ドキュメントから

コンポーネントと同様に、ディレクティブ プロパティ バインディングを必要な数だけテンプレートに並べて追加できます。

HighlightDirective入力プロパティをcalledに追加しますdefaultColor。

@Input() defaultColor: string;

マークアップ

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

Angularは、バインディングが デコレータで公開されているため、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要素には、 name のディレクティブがありますselectable。には、with nameとwith nameのselectable2 つがあります。これら 2 つを nameおよびのプロパティに適用しました。そして、私たちのディレクティブは、デコレータで彼のために設定された、その要素のこれらのプロパティを見つけます。したがって、とは、これらの名前のプロパティを持つ のすべてのディレクティブにバインドされます。@Input()ffirstssecondli[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>
于 2016-08-09T06:26:49.730 に答える
19

多くのオプションを渡すには、オブジェクトを @Input デコレーターにカスタム データを 1 行で渡すことができます。

テンプレートでは

<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
}
于 2016-08-20T15:25:59.457 に答える