如何使用 TypeScript 将多个参数传递给 Angular 中的 @Directives (@Components)？

自从我创建了@Directive as SelectableDirective，我有点困惑，关于如何通过超过一个自定义指令的值。我进行了很多搜索，但没有得到正确的解决方案Angular with 打字稿.

这是我的示例代码：

父组件为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;

    ...
}

所以在这里我想通过来自父级的更多参数组件，我该如何实现这一目标？

来自文档 https://angular.io/docs/ts/latest/guide/attribute-directives.html

与组件一样，您可以添加尽可能多的指令属性绑定 您需要将它们串在模板中。

添加输入属性HighlightDirective called defaultColor:

@Input() defaultColor: string;

Markup

<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 element

<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 and s有名字second。我们已将这两个应用到li带有名称的属性[first] and [second]。我们的指令将在其上找到这些属性li元素，为他设置@Input()装饰师。所以selectable, [first] and [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>