如何通过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 
}