Ich benutze Material 2, um hinzuzufügen md-raised-button
. Ich möchte diese Richtlinie nur anwenden, wenn eine bestimmte Bedingung erfüllt ist.
Beispielsweise:
<button md-raised-button="true"></button>
Ein weiteres Beispiel: Ich habe im Plunker eine dynamische Grundreaktionsform erstellt. Ich verwende die formArrayName
Direktive der reaktiven Form für eine Reihe von Kontrollen. Ich möchte die formArrayName
Direktive nur anwenden, wenn eine bestimmte Bedingung erfüllt ist, andernfalls keine formArrayName
Direktive hinzufügen .
Hier ist ein Plunker-Link .
Antworten:
Ich weiß nicht, ob Sie Anweisungen basierend auf einer Bedingung anwenden können, aber eine Problemumgehung besteht darin, zwei Schaltflächen zu haben und diese basierend auf einer Bedingung anzuzeigen .
Edit: vielleicht dies hilfreich sein.
quelle
Wenn Sie nur ein Attribut hinzufügen müssen, um CSS-Regeln auszulösen, können Sie die folgende Methode verwenden: (Dadurch wird eine Direktive nicht dynamisch erstellt / zerstört.)
<button [attr.md-raised-button]="condition ? '' : null"></button>
Gleiches gilt für Ihren Plunker: Gabel
Aktualisieren:
Wie
condition ? '' : null
funktioniert der Wert:Wenn es die leere Zeichenfolge (
''
) ist, wird esattr.md-raised-button=""
, wenn esnull
das Attribut nicht existiert.Update: Plunker Update: Gabel (Versionsprobleme behoben, bitte beachten Sie, dass die Frage ursprünglich auf Winkel 4 basierte)
quelle
Wie bereits erwähnt, scheint dies nicht möglich zu sein. Eine Sache, die verwendet werden kann, um zumindest eine Duplizierung zu verhindern, ist
ng-template
. Auf diese Weise können Sie den Inhalt des von derngIf
Verzweigung betroffenen Elements extrahieren .Wenn Sie beispielsweise mit Angular Material eine hierarchische Menükomponente erstellen möchten:
Hier gilt die bedingt angewendete Direktive
matMenuTriggerFor
, die nur auf Menüpunkte mit untergeordneten Elementen angewendet werden soll. Der Inhalt der Schaltfläche wird an beiden Stellen über eingefügtngTemplateOutlet
.quelle
Dies mag spät kommen, ist jedoch eine praktikable und elegante Methode, um eine Richtlinie unter bestimmten Bedingungen anzuwenden.
Erstellen Sie in der Direktivenklasse die Eingabevariable:
Legen Sie beim Anwenden der Direktive die Eigenschaft apply der Eingabevariablen fest:
Überprüfen Sie in der Methode der Direktive die Variable this.options.apply und wenden Sie die Direktivenlogik basierend auf der Bedingung an:
quelle
Wie andere ebenfalls angegeben haben,
directives
kann nicht dynamisch angewendet werden.Wenn Sie jedoch nur den
md-button
Stil von flach nach erhöht umschalten möchten , dann ist dies der Fallwürde den Trick machen. Plunker
quelle
Dies könnte auch eine Lösung sein:
[md-raised-button]="condition ? 'true' : ''"
Es funktioniert für Winkel 4, Ion 3 wie folgt:
[color]="condition ? 'primary' : ''"
Wocondition
ist eine Funktion, die entscheidet, ob dies eine aktive Seite ist oder nicht. Der gesamte Code sieht folgendermaßen aus:<button *ngFor="let page of ..." [color]="isActivePage(page) ? 'primary' : ''">{{ page.title }}</button>
quelle
Derzeit gibt es eine
NO
Möglichkeit, eine Direktive bedingt auf eine Komponente anzuwenden. Dies wird nicht unterstützt. Die von Ihnen erstellten Komponenten können bedingt hinzugefügt oder entfernt werden.Es gibt bereits ein Problem, das für dasselbe mit erstellt wurde
angular2
, daher sollte dies auch bei angle4 der Fall sein.Alternativ können Sie die Option mit ng-if wählen
quelle
Ich konnte keine schöne existierende Lösung finden, also habe ich meine eigene Direktive erstellt, die dies tut.
Dann dein HTML:
<div dynamic-attr="{{hasMargin: 'margin-left' ? ''}}"></div>
quelle
@HostBinding('attr.dynamic-attr') @Input('dynamic-attr') attr: string;
anstelle von ngOnInit + ElementRef nur ein verwenden.Vielleicht hilft es jemandem.
Im folgenden Beispiel habe ich die
my-button.component.html
und ich möchte die*appHasPermission
Direktive<button>
nur dann auf die anwenden , wenn dasrole
Attribut gesetzt ist.Auf diese Weise duplizieren Sie den
<button>
Code nicht.quelle
Ja, es ist möglich.
HTML-Seite mit AppActiveAhover-Direktive :)
Richtlinie
quelle
Durch
null
die Verabschiedung der Richtlinie wird sie entfernt!quelle
Verwenden
NgClass
Beispiel für einen wahren Zustand:
oder eine boolesche Funktion
vollständiges Beispiel:
Wenn Sie eine Standardklasse möchten:
quelle
md-raised-button
Attribut nicht als falsch setzen)Ich habe eine andere Idee, was Sie tun könnten.
Sie können das HTML, das Sie ersetzen möchten, in einer Variablen als Zeichenfolge speichern und dann die Direktive mithilfe der
bypassSecurityTrustHtml
Methode des DomSanitizer nach Belieben hinzufügen / entfernen .Ich habe keine saubere Lösung, aber zumindest müssen Sie den Code nicht wiederholen.
quelle
Zum 18. Januar 2019 habe ich auf diese Weise eine Direktive in Angular 5 und höher unter bestimmten Bedingungen hinzugefügt. Ich musste die Farbe der
<app-nav>
Komponente basierend auf änderndarkMode
. Ob sich die Seite im dunklen Modus befand oder nicht.Das hat bei mir funktioniert:
<app-nav [color]="darkMode ? 'orange':'green'"></app-nav>
Ich hoffe das hilft jemandem.
BEARBEITEN
Dies ändert den Wert eines Attributs (Farbe) basierend auf einer Bedingung. Es kommt einfach vor, dass die Farbe mithilfe einer Direktive definiert wird. Wenn Sie dies lesen, werden Sie bitte nicht verwirrt. Dies gilt nicht für eine bedingte Anweisung (dh das Hinzufügen oder Entfernen einer Anweisung zum Dom basierend auf einer Bedingung).
quelle