从文档

与组件一样，您可以根据需要通过在模板中串联它们来添加任意数量的指令属性绑定。

向HighlightDirective调用添加输入属性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。在selectable我们有两个@Input()，fwith namefirst和swith name second。我们已将这两个应用li到名称为[first]和的属性上[second]。我们的指令会在那个li元素上找到这些属性，这些属性是用@Input()装饰器为他设置的。所以selectable, [first]and[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>

要传递许多选项，您可以在一行中将对象传递给带有自定义数据的 @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
}

另一个巧妙的选择是将Directive用作元素而不是属性。

@Directive({
   selector: 'app-directive'
})
export class InformativeDirective implements AfterViewInit {

    @Input()
    public first: string;

    @Input()
    public second: string;

    ngAfterViewInit(): void {
       console.log(`Values: ${this.first}, ${this.second}`);
    }
}

这个指令可以这样使用：

<app-someKindOfComponent>
    <app-directive [first]="'first 1'" [second]="'second 1'">A</app-directive>
    <app-directive [first]="'First 2'" [second]="'second 2'">B</app-directive>
    <app-directive [first]="'First 3'" [second]="'second 3'">C</app-directive>
</app-someKindOfComponent>`

简单、整洁、强大。

类似于我@Input()在指令中使用的上述解决方案，并且能够在指令中传递多个值数组。

selector: '[selectorHere]',

@Input() options: any = {};

输入.html

<input selectorHere [options]="selectorArray" />

来自 TS 文件的数组

selectorArray= {
  align: 'left',
  prefix: '$',
  thousands: ',',
  decimal: '.',
  precision: 2
};