如何使用TypeScript将多个参数传递给Angular中的@Directives(@Components)? [英] How to pass multiple parameter to @Directives (@Components) in Angular with TypeScript?

问题描述

由于我已将@Directive创建为SelectableDirective，因此我对如何将一个以上值传递给自定义指令有点困惑.我进行了很多搜索，但在 Angular 中使用 Typescript 找不到正确的解决方案.

Since I've created @Directive as SelectableDirective, I'm little bit confused, about how to pass more than one value to the custom directive. I have searched a lot but didn't get proper solution in Angular with 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 的参数.

This is a parent component having custom directive [selectable] which takes one param called opt.

以下是此伪指令的代码:

Here is the code for this directive:

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;

    ...
}

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

So here I want to pass more parameters from parent component, how do I achieve this?

推荐答案

来自

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

As with components, you can add as many directive property bindings as you need by stringing them along in the template.

向HighlightDirective添加名为defaultColor的输入属性:

Add an input property to HighlightDirective called defaultColor:

@Input() defaultColor: string;

标记

<p [myHighlight]="color" defaultColor="violet">
  Highlight me too!
</p>

Angular 知道defaultColor绑定属于HighlightDirective，因为您已将其公开给@Input 装饰器.

Angular knows that the defaultColor binding belongs to the HighlightDirective because you made it public with the @Input decorator.

无论哪种方式，@Input装饰器都会告诉Angular此属性是 公共的，可用于上级组件的绑定.没有 @Input，Angular拒绝绑定到该属性.

Either way, the @Input decorator tells Angular that this property is public and available for binding by a parent component. Without @Input, Angular refuses to bind to the property.

以您为例

具有很多参数

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

Add properties into the Directive class with @Input() decorator

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

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

    ...
}

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

And in the template pass bound properties to your 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()，名称为first的f和名称为second的s.我们在名称为[first]和[second]的li属性上应用了这两个属性.我们的指令将在li元素上找到这些属性，这些属性是使用@Input()装饰器为其设置的.因此selectable，[first]和[second]将绑定到li上具有此名称属性的每个指令.

Here on the li element we have a directive with name selectable. In the selectable we have two @Input()'s, f with name first and s with name second. We have applied these two on the li properties with name [first] and [second]. And our directive will find these properties on that li element, which are set for him with @Input() decorator. 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;

    ...
}

标记

<li *ngFor = 'let opt of currentQuestion.options' 
    [selectable] = 'opt' 
    [params]='{firstParam: 1, seconParam: 2, thirdParam: 3}'
    (selectedOption) = 'onOptionSelection($event)'>
    {{opt.option}}
</li>

这篇关于如何使用TypeScript将多个参数传递给Angular中的@Directives(@Components)?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！