Koşullu bir yönerge uygulayın

Eklemek için Materyal 2 kullanıyorum md-raised-button . Bu yönergeyi yalnızca belirli koşullar gerçekleştiğinde uygulamak istiyorum.

Örneğin:

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

Başka bir örnek: Plunker'da temel bir dinamik reaktif form oluşturdum. formArrayNameDenetim dizisi için reaktif form yönergesini kullanıyorum . formArrayNameYönergeyi yalnızca belirli bir koşul doğru olduğunda uygulamak istiyorum , aksi takdirde eklemeyinformArrayName yönerge .

İşte bir plunker bağlantısı .

Bir koşula göre yönergeleri uygulayıp uygulayamayacağınızı bilmiyorum, ancak bir geçici çözüm 2 düğmeye sahip olmak ve bunları bir koşula göre görüntülemek olabilir .

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

Düzenleme: belki bu yardımcı olacaktır.

CSS kurallarını tetiklemek için bir öznitelik eklemeniz gerekiyorsa, aşağıdaki yöntemi kullanabilirsiniz: (bu, bir yönergeyi dinamik olarak oluşturmaz / yok etmez)

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

Aynı şeyi sizin dalıcınıza da uyguladınız: çatal

Güncelleme:

condition ? '' : nullDeğer olarak nasıl çalışır:

Boş dizge ( '') attr.md-raised-button=""olduğunda null, özniteliği olmayacağı zaman olur .

Güncelleme: plunker güncelleme: çatal (sürüm sorunları giderildi, lütfen sorunun başlangıçta açısal 4'e dayandığını unutmayın)

Daha önce de belirtildiği gibi, bu mümkün görünmüyor. En azından bazı kopyaları önlemek için kullanılabilecek bir şey ng-template. Bu, etkilenen öğenin içeriğini çıkarmanıza olanak sağlar.ngIf dallanmadan .

Örneğin, Açısal Malzeme kullanarak hiyerarşik bir menü bileşeni oluşturmak istiyorsanız:

<!-- 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>

Burada koşullu olarak uygulanan yönerge, matMenuTriggerForyalnızca çocuklu menü öğelerine uygulanması gereken dir. Düğmenin içeriği, aracılığıyla her iki yere de eklenir ngTemplateOutlet.

Bu geç gelebilir, ancak şartlı olarak bir yönergeyi uygulamak için uygun ve zarif bir yöntemdir.

Yönerge sınıfında girdi değişkenini oluşturun:

@Input('myDirective') options: any;

Yönergeyi uygularken, girdi değişkeninin uygulama özelliğini ayarlayın:

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

Yönerge yönteminde, this.options.apply değişkenini kontrol edin ve koşula bağlı olarak yönerge mantığını uygulayın:

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

    // directive logic
}

Başkalarının da belirttiği directivesgibi dinamik olarak uygulanamaz.

Sadece geçiş yapmak istiyorsanız, ancak md-buttongelen 'ın stil düz için kaldırdı o zaman bu,

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

hile yapardı. Plunker

Bu da bir çözüm olabilir:

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

Açısal 4, iyonik 3 için şu şekilde çalışıyor:

[color]="condition ? 'primary' : ''"conditionbunun etkin bir sayfa olup olmadığına karar veren bir işlev nerede . Kodun tamamı şöyle görünür:

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

Şu anda, NObir bileşene koşullu olarak bir yönerge uygulamanın bir yolu vardır. Bu desteklenmez. Oluşturduğunuz bileşenler koşullu olarak eklenebilir veya kaldırılabilir.

Zaten aynı için oluşturulmuş bir sorun var angular2 , bu nedenle angular4 de durum böyle olmalıdır.

Alternatif olarak, seçeneğe ng-if ile gidebilirsiniz.

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

Güzel bir mevcut çözüm bulamadım, bu yüzden bunu yapan kendi yönergemi oluşturdum.

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

Sonra html'niz:

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

Belki birine yardımcı olur.

Aşağıdaki örnekte elimde var my-button.component.htmlve *appHasPermissionyönergeyi <button>yalnızca roleöznitelik ayarlanmışsa uygulamak istiyorum .

<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>

Bu şekilde <button>kodu çoğaltmazsınız .

Evet mümkün.

appActiveAhover yönergesine sahip html sayfası :)

  <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>

direktif

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

}

Yönergeye geçmek nullonu kaldırır!

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

Kullanım NgClass

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

gerçek koşul örneği:

this.element === 'Today'

veya bir boole işlevi

getTruth()

tam örnek:

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

Varsayılan bir sınıf istiyorsanız:

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

Ne yapabileceğin hakkında başka bir fikrim var.

Değiştirilmesini istediğiniz html'yi bir değişken içinde bir dizge olarak saklayabilir ve ardından DomSanitizerbypassSecurityTrustHtml yöntemini kullanarak yönergeyi istediğiniz gibi ekleyebilir / kaldırabilirsiniz .

Temiz bir çözüme ulaşmıyorum ama en azından kodu tekrarlamanıza gerek yok.

18 Ocak 2019 itibariyle, Angular 5 ve üzeri sürümlere şartlı olarak bir yönerge ekledim. Buna <app-nav>göre bileşenin rengini değiştirmem gerekiyordu darkMode. Sayfa karanlık modda olup olmadığı.

Bu benim için çalıştı:

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

Umarım bu birine yardımcı olur.

DÜZENLE

Bu, bir koşula bağlı olarak bir niteliğin (renk) değerini değiştirir. Sadece bir yönerge kullanılarak renk tanımlanır. Yani bunu okuyan herkesin kafasını karıştırmayın, bu şartlı olarak bir direktif uygulamak değildir (yani, bir koşula bağlı olarak doma bir direktif eklemek veya kaldırmak anlamına gelir)