Wenden Sie eine Richtlinie unter bestimmten Bedingungen an

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 formArrayNameDirektive der reaktiven Form für eine Reihe von Kontrollen. Ich möchte die formArrayNameDirektive nur anwenden, wenn eine bestimmte Bedingung erfüllt ist, andernfalls keine formArrayNameDirektive hinzufügen .

Hier ist ein Plunker-Link .

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 .

<button *ngIf="!condition"></button>
<button *ngIf="condition" md-raised-button></button> 

Edit: vielleicht dies hilfreich sein.

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 ? '' : nullfunktioniert der Wert:

Wenn es die leere Zeichenfolge ( '') ist, wird es attr.md-raised-button="", wenn es nulldas Attribut nicht existiert.

Update: Plunker Update: Gabel (Versionsprobleme behoben, bitte beachten Sie, dass die Frage ursprünglich auf Winkel 4 basierte)

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 der ngIfVerzweigung betroffenen Elements extrahieren .

Wenn Sie beispielsweise mit Angular Material eine hierarchische Menükomponente erstellen möchten:

<!-- Button contents -->
<ng-template #contentTemplate>
    <mat-icon *ngIf="item.icon != null">{{ item.icon }}</mat-icon>
    {{ item.label }}
</ng-template>

<!-- Leaf button -->
<button *ngIf="item.children == null" mat-menu-item
    (click)="executeCommand()"
    [disabled]="enabled == false">
    <ng-container *ngTemplateOutlet="contentTemplate"></ng-container>
</button>
<!-- Node button -->
<ng-container *ngIf="item.children != null">
    <button mat-menu-item
        [matMenuTriggerFor]="subMenu">
        <ng-container *ngTemplateOutlet="contentTemplate"></ng-container>
    </button>

    <mat-menu #subMenu="matMenu">
        <menu-item *ngFor="let child of item.children" [item]="child"></menu-item>
    </mat-menu>
</ng-container>

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ügt ngTemplateOutlet.

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:

@Input('myDirective') options: any;

Legen Sie beim Anwenden der Direktive die Eigenschaft apply der Eingabevariablen fest:

<div [myDirective] = {apply: someCondition}></div>

Überprüfen Sie in der Methode der Direktive die Variable this.options.apply und wenden Sie die Direktivenlogik basierend auf der Bedingung an:

ngAfterViewInit(): void {
    if (!this.options.apply) {
        return;
    }

    // directive logic
}

Wie andere ebenfalls angegeben haben, directiveskann nicht dynamisch angewendet werden.

Wenn Sie jedoch nur den md-buttonStil von flach nach erhöht umschalten möchten , dann ist dies der Fall

<button md-button [class.mat-raised-button]="isRaised">Toggle Raised Button</button>

würde den Trick machen. Plunker

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' : ''"Wo conditionist 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>

Derzeit gibt es eine NOMö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

<button ngIf="!condition"></button>
<button ngIf="condition" md-raised-button></button> 

Ich konnte keine schöne existierende Lösung finden, also habe ich meine eigene Direktive erstellt, die dies tut.

import { Directive, ElementRef, Input } from '@angular/core';

@Directive({
  selector: '[dynamic-attr]'
})
export class DynamicAttrDirective {
  @Input('dynamic-attr') attr: string;
  private _el: ElementRef;

  constructor(el: ElementRef) {
    this._el = el;
  }

  ngOnInit() {
    if (this.attr === '') return null;
    const node = document.createAttribute(this.attr);
    this._el.nativeElement.setAttributeNode(node);
  }
}

Dann dein HTML:

<div dynamic-attr="{{hasMargin: 'margin-left' ? ''}}"></div>

Vielleicht hilft es jemandem.

Im folgenden Beispiel habe ich die my-button.component.htmlund ich möchte die *appHasPermissionDirektive <button>nur dann auf die anwenden , wenn das roleAttribut gesetzt ist.

<ng-container *ngIf="role; else buttonNoRole" >
  <ng-container *appHasPermission="role">
    <!-- button with *appHasPermission -->
    <ng-template *ngTemplateOutlet="buttonNoRole;"></ng-template>
  </ng-container>
</ng-container>

<ng-template #buttonNoRole>
  <!-- button without *appHasPermission -->
  <button
    mat-raised-button type="button"
    [color]="color"
    [disabled]="disabled"
    [(appClickProgress)]="onClick"
    [key]="progressKey">
    <mat-icon *ngIf="icon">{{ icon }}</mat-icon> {{ label }}
  </button>
</ng-template>

Auf diese Weise duplizieren Sie den <button>Code nicht.

Ja, es ist möglich.

HTML-Seite mit AppActiveAhover-Direktive :)

  <li routerLinkActive="active" #link1="routerLinkActive">
        <a [appActiveAhover]='link1.isActive?false:true' routerLink="administration" [ngStyle]="{'background':link1.isActive?domaindata.get_color3():none}">
          <i class="fa fa-users fa-lg" aria-hidden="true"></i> Administration</a>
      </li>
      <li  routerLinkActive="active" #link2="routerLinkActive">
        <a [appActiveAhover]='link2.isActive?false:true' routerLink="verkaufsburo" [ngStyle]="{'background':link2.isActive?domaindata.get_color3():none,'color':link2.isActive?color2:none}">
          <i class="fa fa-truck fa-lg" aria-hidden="true"></i> Verkaufsbüro</a>
      </li>
      <li  routerLinkActive="active" #link3="routerLinkActive">
        <a [appActiveAhover]='link3.isActive?false:true' routerLink="preisrechner" [ngStyle]="{'background':link3.isActive?domaindata.get_color3():none}">
          <i class="fa fa-calculator fa-lg" aria-hidden="true" *ngIf="routerLinkActive"></i> Preisrechner</a>
      </li>

Richtlinie

@Directive({
  selector: '[appActiveAhover]'
})
export class ActiveAhoverDirective implements OnInit {
  @Input() appActiveAhover:boolean;
  constructor(public el: ElementRef, public renderer: Renderer, public domaindata: DomainnameDataService) {
}

  ngOnInit() {
  }

  @HostListener('mouseover') onMouseOver() {
    if(this.appActiveAhover){
      this.renderer.setElementStyle(this.el.nativeElement, 'color', this.domaindata.domaindata.color2);
    }
  }

  @HostListener('mouseout') onMouseOut() {
    if(this.appActiveAhover){
      this.renderer.setElementStyle(this.el.nativeElement, 'color', 'white');
    }
  }

}

Durch nulldie Verabschiedung der Richtlinie wird sie entfernt!

<button md-raised-button="condition ? true : null"></button>

Verwenden NgClass

[ngClass]="{ 'mat-raised-button': trueCondition }"

Beispiel für einen wahren Zustand:

this.element === 'Today'

oder eine boolesche Funktion

getTruth()

vollständiges Beispiel:

  <button [ngClass]="{ 'mat-raised-button': trueCondition }">TEXT</button>

Wenn Sie eine Standardklasse möchten:

  <button [ngClass]="{ 'mat-raised-button': trueCondition, 'default-class': !trueCondition }">TEXT</button>

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 bypassSecurityTrustHtmlMethode des DomSanitizer nach Belieben hinzufügen / entfernen .

Ich habe keine saubere Lösung, aber zumindest müssen Sie den Code nicht wiederholen.

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 ändern darkMode. 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).