Eckige 2-Pass-Variablen an den Konstruktor in html

Ich bin der Erstellung einer Komponente, die wiederverwendet werden überall in meiner app, die wichtige code unten

.ts

export class DieInputComponent {
  constructor(private sides: Number, private dice: Number) { 
  }
}

.html -

<input type="number" placeholder="{{dice}}d{{sides}}"/>

Erstelle ich diese Objekte in meine html-Vorlagen, wie so

<die-input></die-input>

Wie würde ich mich über Eingabe der Konstruktor Variablen in einem html-tag? Für das Leben von mir ich kann nicht finden, eine geeignete Referenz, wie es zu tun.

  • Ich habe nicht gesehen, jeder pass normalen Variablen auf eine Komponente Konstruktor. In der Regel, passieren Sie Dienstleistungen, wie ein preference service. Wenn Sie die bekommen, Griff-of-service, können Sie eine Initialisierung dieses Objekts.
  • Für die Parameterübergabe an den Konstruktor von Komponenten oder Dienstleistungen (die instanziiert DI, müssen Sie die Werte mit übereinstimmenden Typen oder string-Schlüssel und DI geht für Sie. Du kannst nicht vorbei Konstruktor Parameter wie die Klassen selbst.
InformationsquelleAutor Crimthann | 2016-06-20
  1. 4

    Wenn Sie müssen etwas Wert sein, innerhalb Ihrer component-Klasse dann einfach mit @Input-variable und übergeben Sie den Wert als Attribut der Komponente

    export class DieInputComponent{    
    @Input()sides:Number;
    @Input()dice:Number;
 }   
    <die-input [sides]='6' [dice]='1'></die-input>
    InformationsquelleAutor Ravinder Kumar
  2. 3

    Können Sie die Attribut-Werte mithilfe der @Attribute keyword in den Konstruktor. Dies wird Ihnen der string-Wert des Attributs, das Sie suchen. Für dein Beispiel wäre das: 

    export class DieInputComponent {
  constructor(@Attribute('placeholder') theInput: string) {
    //theInput.length > 0?
    //theInput.split into dice/sides and parse into integers
  }
}

    Lesen Sie mehr über @Attribute hier: eckig.io-docs

    InformationsquelleAutor Sjoerd
Schreibe einen Kommentar