Áp dụng chỉ thị có điều kiện

Tôi đang sử dụng Vật liệu 2 để thêm md-raised-button. Tôi chỉ muốn áp dụng chỉ thị này nếu điều kiện nhất định trở thành đúng.

Ví dụ:

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

Một ví dụ khác: Tôi đã tạo một dạng phản ứng động cơ bản trong plunker. Tôi đang sử dụng formArrayNamechỉ thị của biểu mẫu phản ứng cho mảng điều khiển. Tôi chỉ muốn áp dụng formArrayNamechỉ thị nếu điều kiện cụ thể trở thành đúng, nếu không thì không thêm formArrayNamechỉ thị.

Đây là một liên kết plunker .

Tôi không biết liệu bạn có thể áp dụng các chỉ thị dựa trên một điều kiện hay không, nhưng cách giải quyết sẽ là có 2 nút và hiển thị chúng dựa trên một điều kiện .

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

Chỉnh sửa: có thể điều này sẽ hữu ích.

Nếu bạn chỉ cần thêm một thuộc tính để kích hoạt các quy tắc CSS, bạn có thể sử dụng phương pháp dưới đây: (điều này không tự động tạo / hủy một chỉ thị)

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

Áp dụng tương tự cho plunker: fork của bạn

Cập nhật:

Cách condition ? '' : nullhoạt động như giá trị:

Khi ''nó trở thành chuỗi rỗng ( ) attr.md-raised-button="", khi đó nullthuộc tính của nó sẽ không tồn tại.

Cập nhật: cập nhật plunker: fork (các vấn đề về phiên bản đã được khắc phục, xin lưu ý rằng câu hỏi ban đầu dựa trên góc 4)

Như đã lưu ý, điều này dường như không khả thi. Một thứ có thể được sử dụng để ít nhất là ngăn chặn một số trùng lặp là ng-template. Điều này cho phép bạn trích xuất nội dung của phần tử bị ảnh hưởng bởi sự ngIfphân nhánh.

Ví dụ: nếu bạn muốn tạo một thành phần menu phân cấp bằng 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>

Ở đây, chỉ thị áp dụng có điều kiện là matMenuTriggerFor, chỉ nên áp dụng cho các món trong thực đơn có trẻ em. Nội dung của nút được chèn vào cả hai nơi qua ngTemplateOutlet.

Điều này có thể đến muộn, nhưng nó là một phương pháp khả thi và thanh lịch để áp dụng một chỉ thị có điều kiện.

Trong lớp chỉ thị, hãy tạo biến đầu vào:

@Input('myDirective') options: any;

Khi áp dụng chỉ thị, hãy đặt thuộc tính áp dụng của biến đầu vào:

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

Trong phương thức của lệnh kiểm tra biến this.options.apply và áp dụng logic chỉ thị dựa trên điều kiện:

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

    // directive logic
}

Như những người khác cũng đã nêu, directiveskhông thể được áp dụng động.

Tuy nhiên, nếu bạn chỉ muốn chuyển đổi md-buttonkiểu của từ phẳng sang nâng , thì đây là

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

sẽ thực hiện thủ thuật. Plunker

Đây cũng có thể là một giải pháp:

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

Nó hoạt động cho góc 4, ion 3 như thế này:

[color]="condition ? 'primary' : ''"đâu conditionlà một chức năng quyết định xem đây có phải là trang đang hoạt động hay không. Toàn bộ mã trông như thế này:

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

Hiện tại, có một NOcách để áp dụng có điều kiện một chỉ thị cho một thành phần, điều này không được hỗ trợ. Các thành phần mà bạn đã tạo có thể được thêm hoặc bớt có điều kiện.

Đã có một vấn đề được tạo ra cho cùng một vấn đề angular2, vì vậy nó cũng sẽ xảy ra với trường hợp của angle4.

Ngoài ra, bạn có thể chọn tùy chọn với ng-if

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

Tôi không thể tìm thấy một giải pháp hiện có tốt, vì vậy tôi đã xây dựng chỉ thị của riêng mình để thực hiện điều này.

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

Sau đó, html của bạn:

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

Có thể nó sẽ giúp ích cho ai đó.

Trong ví dụ dưới đây, tôi có my-button.component.htmlvà tôi muốn áp dụng *appHasPermissionchỉ thị cho <button>chỉ nếu rolethuộc tính được đặt.

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

Bằng cách đó, bạn không trùng lặp <button>mã.

vâng nó là có thể.

trang html với chỉ thị appActiveAhover :)

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

chỉ thị

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

}

Chuyển nullđến chỉ thị loại bỏ nó!

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

Sử dụng NgClass

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

ví dụ về điều kiện đúng:

this.element === 'Today'

hoặc một hàm boolean

getTruth()

đầy đủ ví dụ:

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

Nếu bạn muốn một lớp mặc định:

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

Tôi có một ý tưởng khác về những gì bạn có thể làm.

Bạn có thể lưu trữ html mà bạn muốn thay thế trong một biến dưới dạng chuỗi và sau đó thêm / xóa chỉ thị khỏi nó như bạn muốn, bằng cách sử dụng bypassSecurityTrustHtmlphương thức của DomSanitizer .

Tôi không dẫn đến một giải pháp sạch nhưng ít nhất bạn không cần phải lặp lại mã.

Vào ngày 18 tháng 1 năm 2019, Đây là cách tôi thêm chỉ thị có điều kiện trong Angular 5 trở lên. Tôi cần thay đổi màu sắc của <app-nav>thành phần dựa trên darkMode. Nếu trang ở chế độ tối hay không.

Điều này đã làm việc cho tôi:

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

Tôi hi vọng điêu nay se giup được ai đo.

BIÊN TẬP

Điều này thay đổi giá trị của một thuộc tính (màu) dựa trên một điều kiện. Nó chỉ xảy ra rằng màu được xác định bằng cách sử dụng một chỉ thị. Vì vậy, bất kỳ ai đọc điều này, xin đừng nhầm lẫn, đây không phải là áp dụng chỉ thị có điều kiện (nghĩa là thêm hoặc xóa chỉ thị vào dom dựa trên một điều kiện)