ใช้คำสั่งตามเงื่อนไข

ฉันใช้วัสดุที่ 2 md-raised-buttonการเพิ่ม ฉันต้องการใช้คำสั่งนี้ก็ต่อเมื่อเงื่อนไขบางอย่างกลายเป็นจริง

ตัวอย่างเช่น:

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

อีกตัวอย่างหนึ่ง: ฉันสร้างรูปแบบปฏิกิริยาไดนามิกพื้นฐานใน plunker ฉันใช้formArrayNameคำสั่งของรูปแบบปฏิกิริยาสำหรับอาร์เรย์ของการควบคุม ฉันต้องการใช้formArrayNameคำสั่งเฉพาะในกรณีที่เงื่อนไขเฉพาะกลายเป็นจริงมิฉะนั้นอย่าเพิ่มformArrayNameคำสั่ง

นี่คือการเชื่อมโยง plunker

ผมไม่ทราบว่าคุณสามารถใช้คำสั่งขึ้นอยู่กับสภาพ แต่การแก้ปัญหาจะมี2 ปุ่มและแสดงให้พวกเขาขึ้นอยู่กับเงื่อนไข

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

แก้ไข: บางทีนี่อาจเป็นประโยชน์

หากคุณต้องการเพิ่มแอตทริบิวต์เพื่อเรียกใช้กฎ CSS คุณสามารถใช้วิธีการด้านล่าง: (สิ่งนี้ไม่ได้สร้าง / ทำลายคำสั่งแบบไดนามิก)

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

นำไปใช้กับคนขับรถของคุณ: ส้อม

อัปเดต:

วิธีการcondition ? '' : nullทำงานเป็นค่า:

เมื่อสตริงว่าง ( '') กลายเป็นattr.md-raised-button=""เมื่อnullนั้นแอตทริบิวต์จะไม่มีอยู่

อัปเดต: การอัปเดต plunker: fork (แก้ไขปัญหาเวอร์ชันโปรดทราบว่าคำถามเดิมขึ้นอยู่กับเชิงมุม 4)

ตามที่ระบุไว้แล้วสิ่งนี้ดูเหมือนจะเป็นไปไม่ได้ ng-templateสิ่งหนึ่งที่สามารถนำมาใช้อย่างน้อยป้องกันการทำสำเนาบางส่วน สิ่งนี้ช่วยให้คุณแยกเนื้อหาขององค์ประกอบที่ได้รับผลกระทบจากการngIfแตกแขนง

ตัวอย่างเช่นหากคุณต้องการสร้างส่วนประกอบเมนูแบบลำดับชั้นโดยใช้ Angular Material:

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

นี่คือคำสั่งที่ใช้ตามเงื่อนไขmatMenuTriggerForซึ่งควรใช้กับรายการเมนูที่มีเด็กเท่านั้น ngTemplateOutletเนื้อหาของปุ่มจะแทรกอยู่ในสถานที่ทั้งสองทาง

สิ่งนี้อาจมาช้า แต่เป็นวิธีการที่ใช้ได้ผลและสวยงามในการใช้คำสั่งตามเงื่อนไข

ในคลาสคำสั่งให้สร้างตัวแปรอินพุต:

@Input('myDirective') options: any;

เมื่อใช้คำสั่งตั้งค่าคุณสมบัติใช้ของตัวแปรอินพุต:

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

ในวิธีการตรวจสอบคำสั่งสำหรับตัวแปร this.options.apply และใช้ตรรกะคำสั่งตามเงื่อนไข:

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

    // directive logic
}

ตามที่คนอื่นระบุไว้เช่นกันdirectivesไม่สามารถใช้แบบไดนามิกได้

แต่ถ้าคุณเพียงต้องการที่จะสลับmd-button'สไตล์จากแบนที่จะยกขึ้นแล้วนี้

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

จะทำเคล็ดลับ Plunker

นี่อาจเป็นวิธีแก้ปัญหาเช่นกัน:

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

มันทำงานสำหรับเชิงมุม 4, ไอออนิก 3 เช่นนี้:

[color]="condition ? 'primary' : ''"ซึ่งconditionเป็นฟังก์ชันที่ตัดสินว่านี่คือหน้าที่ใช้งานอยู่หรือไม่ รหัสทั้งหมดมีลักษณะดังนี้:

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

ขณะนี้มีNOวิธีใช้คำสั่งแบบมีเงื่อนไขกับคอมโพเนนต์ซึ่งไม่รองรับคอมโพเนนต์ที่คุณสร้างขึ้นสามารถเพิ่มหรือลบออกได้ตามเงื่อนไข

มีปัญหาที่สร้างขึ้นสำหรับสิ่งเดียวกันอยู่angular2แล้วดังนั้นจึงควรเป็นกรณีที่มี angular4 เช่นกัน

หรือคุณสามารถไปที่ตัวเลือกด้วย ng-if

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

ฉันไม่พบวิธีแก้ปัญหาที่ดีที่มีอยู่ดังนั้นฉันจึงสร้างคำสั่งของตัวเองซึ่งทำสิ่งนี้

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

จากนั้น html ของคุณ:

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

บางทีมันอาจจะช่วยใครบางคน

ในตัวอย่างด้านล่างฉันมีmy-button.component.htmlและฉันต้องการใช้*appHasPermissionคำสั่งกับ<button>เฉพาะในกรณีที่roleมีการตั้งค่าแอตทริบิวต์

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

ด้วยวิธีนี้คุณจะไม่ทำซ้ำ<button>รหัส

ใช่มันเป็นไปได้

หน้า html พร้อม appActiveAhover directive :)

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

คำสั่ง

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

}

การส่งผ่านnullไปยังคำสั่งจะลบออก!

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

ใช้ NgClass

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

ตัวอย่างสภาพจริง:

this.element === 'Today'

หรือฟังก์ชันบูลีน

getTruth()

ตัวอย่างเต็ม:

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

หากคุณต้องการคลาสเริ่มต้น:

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

ฉันมีความคิดอีกอย่างว่าคุณทำอะไรได้บ้าง

คุณสามารถเก็บ html ที่ที่คุณต้องการแทนที่ในตัวแปรเป็นสตริงและจากนั้นเพิ่ม / ลบคำสั่งจากมันตามที่คุณต้องการโดยใช้bypassSecurityTrustHtmlวิธีการDomSanitizer

ฉันไม่ได้ผลลัพธ์ในการแก้ปัญหาที่สะอาด แต่อย่างน้อยคุณก็ไม่จำเป็นต้องทำรหัสซ้ำ

ณ วันที่ 18 มกราคม 2019 นี่คือวิธีที่ฉันเพิ่มคำสั่งแบบมีเงื่อนไขใน Angular 5 ขึ้นไป ฉันต้องการเปลี่ยนสีของ<app-nav>ส่วนประกอบตามdarkMode. หากหน้าอยู่ในโหมดมืดหรือไม่

สิ่งนี้ใช้ได้ผลสำหรับฉัน:

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

ฉันหวังว่านี่จะช่วยใครบางคนได้

แก้ไข

สิ่งนี้จะเปลี่ยนค่าของแอตทริบิวต์ (สี) ตามเงื่อนไข มันเกิดขึ้นที่สีถูกกำหนดโดยใช้คำสั่ง ดังนั้นใครก็ตามที่อ่านสิ่งนี้โปรดอย่าสับสนนี่ไม่ได้ใช้คำสั่งแบบมีเงื่อนไข (เช่นซึ่งหมายถึงการเพิ่มหรือลบคำสั่งให้กับโดมตามเงื่อนไข)