wake-up-neo.net

Wenden Sie eine Anweisung bedingt an

Ich benutze Material 2, um md-raised-button hinzuzufügen.

Ich möchte diese Direktive nur anwenden, wenn bestimmte Bedingungen zutreffen.

Zum Beispiel: 

<button md-raised-button="true"></button>

Ein anderes Beispiel: Ich habe eine grundlegende dynamische reaktive Form in Plunker erstellt . Ich verwende die formArrayName-Direktive der reaktiven Form für ein Array von Steuerelementen . Ich möchte die formArrayName-Direktive nur anwenden, wenn eine bestimmte Bedingung wahr wird. Andernfalls fügen Sie keine formArrayName Direktive hinzu. Ich habe viel versucht und recherchiert, konnte aber keine Lösung finden. 

Hier ist der Plunker-Link: https://plnkr.co/edit/oPZ7PyBSf8jjYa2KVh4J?p=preview

Ich würde mich sehr über jeden Beitrag freuen. 

Danke im Voraus!

43
user2899728

Ich weiß nicht, ob Sie Anweisungen basierend auf einer Bedingung anwenden können, aber ein Workaround hätte 2-Schaltflächen und zeigt diese basierend auf einer Bedingung an.

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

Edit: vielleicht das wird hilfreich sein.

24
LLL

Sie können die folgende Methode verwenden:

<button [attr.md-raised-button]="condition ? '' : null"></button>

Gleiches auf Ihren Plunker angewendet: Gabel

Update:

Wie condition ? '' : null als Wert fungiert:

Wenn es sich um die leere Zeichenfolge ('') handelt, wird es attr.md-raised-button="", wenn die null-Eigenschaft nicht vorhanden ist.

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

38
Aldracor

Dies kann zu spät kommen, aber es ist eine praktikable und elegante Methode, eine Richtlinie unter bestimmten Bedingungen anzuwenden.

In der Direktive-Klasse erstellen Sie die Eingabevariable:

@Input('myDirective') options: any;

Legen Sie beim Anwenden der Direktive die Apply-Eigenschaft der Eingabevariable fest:

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

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

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

    // directive logic
}
9
Tiha

Wie auch andere angegeben haben, kann directives nicht dynamisch angewendet werden.

Wenn Sie jedoch nur den Stil von md-button von flat zu raised umschalten möchten, ist dies der Fall

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

würde den Trick tun. Plunker

7
Ankit Singh

Wie bereits erwähnt, scheint dies nicht möglich zu sein. Eine Sache, die verwendet werden kann, um zumindest einige Duplizierungen zu verhindern, ist ng-template. Dadurch können Sie den Inhalt des Elements extrahieren, das von der ngIf-Verzweigung betroffen ist.

Wenn Sie zum Beispiel eine hierarchische Menükomponente mit Winkelmaterial 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>

Die bedingt angewendete Direktive ist hier matMenuTriggerFor, die nur für Menüelemente mit untergeordneten Elementen gelten sollte. Der Inhalt der Schaltfläche wird an beiden Stellen über ngTemplateOutlet eingefügt.

6
H.B.

Derzeit gibt es eine NO - Methode, um eine Direktive auf eine Komponente bedingt anzuwenden. Dies wird nicht unterstützt. Die von Ihnen erstellten Komponenten können bedingt hinzugefügt oder entfernt werden. 

Es wurde bereits ein Problem mit angular2 erstellt, 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> 
3
Sajeetharan

Ich konnte keine bestehende Lösung von Nice 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 deine HTML:

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

2
Cappi10

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');
    }
  }

}

Dies könnte auch eine Lösung sein:

[md-raised-button]="condition ? 'true' : ''"


Es funktioniert für angular 4, ionic 3 wie folgt:

[color]="condition ? 'primary' : ''" Wobei condition eine Funktion ist, die entscheidet, ob es sich um eine aktive Seite handelt oder nicht. Der gesamte Code sieht folgendermaßen aus:

<button *ngFor="let page of ..." [color]="isActivePage(page) ? 'primary' : ''">{{ page.title }}</button>

1
zalog

Stand: 18. Januar 2019, So fügte ich eine bedingte Anweisung in Angular 5 und höher hinzu. Ich musste die Farbe der <app-nav>-Komponente basierend auf darkMode ändern. Ob die Seite im dunklen Modus war oder nicht.

Das hat für mich funktioniert:

<app-nav [color]="darkMode ? 'orange':'green'"></app-nav>

Ich hoffe das hilft jemandem.

0
Sandra israel

Ich habe eine andere Vorstellung davon, was Sie tun könnten.

Sie können die HTML-Datei, die Sie ersetzen möchten, in einer Variablen als String speichern und dann die Direktive nach Belieben hinzufügen/entfernen. Verwenden Sie dazu die bypassSecurityTrustHtml-Methode des DomSanitizer .

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

0
LLL