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

Question

由于我创建了 @Directive 作为 SelectableDirective ，我有点困惑，关于如何将 多个 值传递给自定义指令。我进行了很多搜索，但没有在 Angular 中使用 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){}
    ....
}

这是一个具有自定义指令 [selectable] 的父组件，它采用一个名为 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;

    ...
}

所以在这里我想 从父组件传递更多的参数，我该如何实现呢？

原文由 Sagar Ganesh 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

从 文档

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

将输入属性添加到 HighlightDirective 称为 defaultColor ：

>  @Input() defaultColor: string;
>
> ```

标记

> ```
> <p [myHighlight]="color" defaultColor="violet">
>   Highlight me too!
> </p>
>
> ```
>
> **Angular** 知道 `defaultColor` 绑定属于 `HighlightDirective` 因为您使用 `@Input` 装饰器将其公开。
>
> 不管怎样， `@Input` 装饰器告诉 Angular 这个属性是公共的并且可以被父组件绑定。如果没有 `@Input` ，Angular 拒绝绑定到该属性。

**对于你的例子**

**有很多参数**

使用 `@Input()` 装饰器将属性添加到 `Directive` 类中

@Directive({ selector: ‘[selectable]’ }) export class SelectableDirective{ private el: HTMLElement;

@Input('selectable') option:any;
@Input('first') f;
@Input('second') s;

...

}

并在模板中将绑定属性传递给您的 `li` 元素

{{opt.option}}

在 `li` 元素上，我们有一个名为 `selectable` 的指令。 In the `selectable` we have two `@Input()` 's, `f` with name `first` and `s` with name `second` 。我们已经在 `li` 属性上应用了这两个，名称为 `[first]` 和 `[second]` 。我们的指令会在 `li` 元素上找到这些属性，这些属性是用 `@Input()` 装饰器为他设置的。 So `selectable` , `[first]` and `[second]` will be bound to every directive on `li` , which has property with these names.

**单参数**

@Directive({ selector: ‘[selectable]’ }) export class SelectableDirective{ private el: HTMLElement;

@Input('selectable') option:any;
@Input('params') params;

...

}

标记

{{opt.option}}

”`

原文由 Suren Srapyan 发布，翻译遵循 CC BY-SA 3.0 许可协议