wake-up-neo.com

Wie kann ich @ Angle with TypeScript mehrere Parameter übergeben?

Seit ich @Directive als SelectableDirective erstellt habe, bin ich etwas verwirrt, wie man mehr als einen Wert an die benutzerdefinierte Direktive übergibt. Ich habe viel gesucht, aber in Angular mit TypeScript keine richtige Lösung gefunden.

Mein Beispielcode ist hier: 

Übergeordnete Komponente als 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){}
    ....
}

Dies ist eine übergeordnete Komponente mit der benutzerdefinierten Direktive [wählbar], die einen Parameter namens opt annimmt. 

Hier ist der Code für diese Direktive: 

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;

    ...
}

Hier möchte ich weitere Parameter von Parent-Komponente übergeben. Wie kann ich das erreichen?

javascriptangulartypescriptangular6
45
Shree

Aus der Dokumentation

Wie bei Komponenten können Sie so viele Direktiveigenschaftenbindungen wie .__ hinzufügen. Sie brauchen sie, indem Sie sie in der Vorlage festmachen. 

Fügen Sie eine Eingabeeigenschaft zu HighlightDirective mit dem Namen defaultColor hinzu:

@Input() defaultColor: string;

Markup

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

Angular weiß, dass die defaultColor-Bindung zur HighlightDirective gehört, da Sie sie mit dem @Input.__ veröffentlicht haben. Dekorateur.

In jedem Fall teilt der @Input-Dekorateur Angular mit, dass diese Eigenschaft .__ ist. public und zur Bindung durch eine übergeordnete Komponente verfügbar. Ohne @Input, weigert sich Angular, an die Eigenschaft zu binden.

Für dein Beispiel

Mit vielen Parametern

Fügen Sie der Directive-Klasse Eigenschaften mit dem @Input()-Dekorator hinzu

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

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

    ...
}

Übergeben Sie in der Vorlage gebundene Eigenschaften an Ihr li-Element

<li *ngFor = 'let opt of currentQuestion.options' 
    [selectable] = 'opt' 
    [first]='YourParameterHere'
    [second]='YourParameterHere'
    (selectedOption) = 'onOptionSelection($event)'>
    {{opt.option}}
</li>

Hier auf dem Element li haben wir eine Direktive mit dem Namen selectable. In der selectable haben wir zwei @Input()s, f mit dem Namen first und s mit dem Namen second. Wir haben diese beiden auf die li-Eigenschaften mit dem Namen [first] und [second] angewendet. Und unsere Direktive wird diese Eigenschaften auf dem li-Element finden, das für ihn mit dem @Input()-Dekorator festgelegt wurde. selectable, [first] und [second] werden also an jede Anweisung in li gebunden, die über eine Eigenschaft mit diesen Namen verfügt.

Mit Einzelparameter

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

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

    ...
}

Markup

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

um viele Optionen zu übergeben, können Sie ein Objekt mit benutzerdefinierten Daten in einer einzigen Zeile an einen @Input-Dekorierer übergeben.

In der Vorlage

<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>

so in der Richtlinie Klasse

@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
}
9
Dag

Eine weitere nette Option ist die Verwendung der Directive als Element und nicht als Attribut.

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

Und diese Direktive kann so verwendet werden:

<app-someKindOfComponent>
    <app-directive [first]="'first 1'" [second]="'second 1'">A</app-directive>
    <app-directive [first]="'First 2'" [second]="'second 2'">B</app-directive>
    <app-directive [first]="'First 3'" [second]="'second 3'">C</app-directive>
</app-someKindOfComponent>`

Einfach, ordentlich und kraftvoll.

2
Aharon Ohayon

Ähnlich wie bei den obigen Lösungen habe ich @Input() in einer Direktive verwendet und konnte mehrere Arrays von Werten in der Direktive übergeben.

selector: '[selectorHere]',

@Input() options: any = {};

Input.html

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

Array aus der TS-Datei 

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