angular 2+ Komponente mit Attributnamen und keine Parameter

Ich möchte einem Benutzer ermöglichen, eine Liste von Ein-Wort-Attributen ohne Parameterwerte bereitzustellen. Zum Beispielangular 2+ Komponente mit Attributnamen und keine Parameter

<container row crosscenter wrap spacearound ...>

, die wie folgt in container.html in etwas ergibt

<div [ngClass]="{ 'flexDisplay': true, 'directionRow': isRow, 'directionCol': isCol, 'contentSpaceAround': isSpaceAround}" ...>

Was mir fehlt ist wie

@Input('row') isRow = false;

auf true gesetzt, wenn 'Reihe' war in der Containerlinie vorhanden.

Irgendwelche Ideen? Vielen Dank im Voraus. Yogi

Quelle

2017-10-11 Yogi Bear

Dies kann in ngOnChanges behandelt werden. Der Wert kann entweder zurück zur Eingang Eigenschaft oder zu einem Objekt zugeordnet werden, die

ngOnChanges(changes: SimpleChanges) { 
    if ('foo' in changes) { 
    this.options.foo = true; 
    } 
}

Da gibt es keine Möglichkeit zu ngClass weitergegeben werden, wie Eingaben nicht zugeordnet werden können, gibt es keinen Grund, Bindungen für sie zu sorgen. @Attribute kann stattdessen verwendet werden:

constructor(@Attribute('foo') public foo: boolean|null) { 
    this.foo = (foo != null); 
}

Mit Attributen für regelmäßige Optionen ist keine gute Entscheidung, Design-weise. Dies verhindert, dass sie dynamisch gesetzt werden. Stattdessen ist es immer vorzuziehen, die Optionen zu akzeptieren. Wenn alle Optionen sollen Flaggen sein, kann es eine Zeichenfolge eingegeben werden, die in ngOnChanges aufgeteilt und verarbeitet werden, wie:

<container options="row crosscenter wrap spacearound">

oder

<container [options]="'row crosscenter wrap spacearound'">

Quelle

2017-10-11 20:54:25 estus

Ich mag deine Antwort. Insbesondere mit dem options = approach. Die Sache, die ich nicht verstehe, ist, wie dies dazu führt, dass ein onChanges-Ereignis eintritt. Kannst du mir helfen, das zu verstehen? –

Änderungen in @ Input-Prop werden mit https://angular.io/api/core/OnChanges Hook behandelt. Wenn Sie die Eingabe "Optionen" der Komponente festlegen, kann der Wert im ngOnChanges -Hook angezeigt werden. Es wird mindestens einmal mit dem ersten "Optionen" -Wert ausgeführt. – estus

Danke estus. Ich denke, dass das, was dies wirklich zur richtigen Antwort gemacht hat, die Tatsache ist, dass es mindestens einmal mit den anfänglichen Optionen läuft. Ich schätze Ihre Hilfe. :-) –

Ich denke, die Antwort auf meine Frage ist, Richtlinien für jedes der "Ein-Wort" -Tags (Attribute) zu erstellen, die ich verwenden möchte. :-)

Quelle

2017-10-11 18:18:32

angular 2+ Komponente mit Attributnamen und keine Parameter

Antwort

Verwandte Themen