如何通過TypeScript將多個參數傳遞給Angular @Directives？

Question

由於我創建了@Directive作爲SelectableDirective，我有點困惑，關於如何通過多個價值的自定義指令，我已經搜索了很多，但沒有得到正確的解決方案與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){} 
    .... 
} 

這是具有父組件定製指令，因爲[可選]這需要一個PARAM稱爲選擇，這裏是這個指令代碼：

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; 

    ... 
} 

所以在這裏我想通過從父組件多個參數，我該如何實現這一目標？

Answer 1

從Documentation

與組件，您可以添加儘可能多的指向性綁定，因爲你需要通過沿着模板它們串 。

添加輸入屬性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()'s，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> 

Answer 2

要通過許多選項，你可以傳遞一個對象到@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 
}