Поскольку я создал @Directive
как SelectableDirective
, я немного смущен, о том, как передать более одного значения в пользовательскую директиву, я много искал, но didn 't получить правильное решение в 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){}
....
}
Это родительский компонент, имеющий настраиваемую директиву как [выбираемый], который принимает один параметр с именем 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;
...
}
Итак, здесь я хочу передать дополнительные параметры из родительского компонента, как это сделать?