2017-09-21 1 views
1

Ich möchte eine Klasse einmal gesetzt, wenn die Vorlage initialisiert. Ein Kollege schriebngClass - vs - [attr.class] - vs - class | wird Attribut Interpolation veraltet sein und wie man dieses performant macht

<div [attr.class]="localVariable = 'string' ? 'class-name' : null"><div> 

, aber das scheint seltsam. Ich glaube, ich möchte nicht

[ngClass]="{'class-name': localVariable === 'string'}" 

weil dies jeden Lebenszyklus laufen würde, und ich erwarte nicht, die ortsveränderlichen dynamisch während der Ausführung der Anwendung zu ändern.

Ich ziehe es statt:

class="{{localVariable = 'string' ? 'class-name' : null}}" 

aber mein Kollege sagte, dass dies nicht durch Schräg empfohlen wird, und dass die Unterstützung für die Interpolation auf Attribut veraltet. Kann jemand dies bestätigen oder einen Fall für diese am meisten performant machen, da erwartet wird, dass sich der gebundene Wert nicht ändert, nachdem die Vorlage gerendert wurde?

+2

Innerhalb '[ngClass]' brauchen Sie die doppelten Klammern nicht. Sie können einfach schreiben: '[ngClass] =" {'className': localVariable === 'string'} "' –

+0

ah, ja, Syntaxfehler meinerseits. –

Antwort

1

Mit ngClass können Sie dynamisch Klassen zur aktuellen Klassenliste für dieses Element hinzufügen. Aber wenn Sie attr.class verwenden, wird die Liste der Klassen, die auf dieses Element einwirken, vollständig neu zugewiesen. Sie können class zusammen mit ngClass in einem Element haben, wobei ngClass die dynamische Liste der Klassen enthält. Mehr über ngClass here.