Question

由于我已将@Directive创建为SelectableDirective，我对如何将多个值传递给自定义指令感到有些困惑。我已经搜索了很多但是没有使用 Typescript 在 Angular 中获得正确的解决方案。

以下是我的示例代码：

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

    ...
}

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

Answer 1

来自Documentation

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

将输入属性添加到名为HighlightDirective的{{1}}：
defaultColor

标记

@Input() defaultColor: string;
Angular 知道<p [myHighlight]="color" defaultColor="violet"> Highlight me too! </p>绑定属于defaultColor，因为您使用HighlightDirective将其公开   装饰器。

无论哪种方式，@Input装饰器告诉Angular这个属性是   public，可供父组件绑定。没有   @Input，Angular拒绝绑定该属性。

为您的示例

有很多参数

使用@Input装饰器

将属性添加到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()名称为f，first名称为s。我们已在名为second和li的{{1}}媒体资源上应用了这两项内容。我们的指令将在[first]元素上找到这些属性，这些属性是使用[second]装饰器为他设置的。因此，li，@Input()和selectable将绑定到[first]上的每个指令，其中包含具有这些名称的属性。

使用单个参数

[second]

标记

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
}

Answer 3

另一个不错的选择是将self.main用作元素而不是属性。

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}`);
    }
}

简单，整洁且功能强大。

Answer 4

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

selector: '[selectorHere]',

@Input() options: any = {};

Input.html

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

TS文件中的数组

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

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

4 个答案: