如何使用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){}
    ....
}

"提供者:[AppService]，指令:[SelectableDirective, ResultComponent]})导出类 MCQComponent 实现 OnInit{私人 currentIndex:any = 0;私人当前问题:问题=新问题()；私人问题列表:数组<问题>= [];....构造函数(私有应用服务:AppService){}....}

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

这是一个具有自定义指令 [selectable] 的父组件，该指令采用一个名为 opt 的参数.

Here is the code for this directive:

这是该指令的代码:

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

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

解决方案

推荐答案

来自 文档

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

Add an input property to HighlightDirective called defaultColor:

向 HighlightDirective 添加一个名为 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 这个属性是public 并且可供父组件绑定.没有@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()，f，名称为 first 和 s 名称为 second.我们已经将这两个应用于名为 [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屋！