Застосовувати директиву умовно

Для додавання я використовую Матеріал 2 md-raised-button. Я хочу застосувати цю директиву лише в тому випадку, якщо певна умова стане істинною.

Наприклад:

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

Ще один приклад: я створив основну динамічну реактивну форму в планку. Я використовую formArrayNameдирективу реактивної форми для масиву елементів управління. Я хочу застосувати formArrayNameдирективу лише в тому випадку, якщо конкретна умова стане істинною, інакше не додайте formArrayNameдирективу.

Ось посилання на планкер .

Я не знаю, чи можна застосовувати директиви, що базуються на умові, але для вирішення проблеми буде 2 кнопки та відображення їх на основі умови .

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

Редагувати: можливо, це буде корисним.

Якщо вам просто потрібно додати атрибут, щоб запустити правила CSS, ви можете скористатися методом нижче: (це не динамічно створює / знищує директиву)

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

Застосовано те саме до вашого планку: fork

Оновлення:

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

зробив би трюк. Плункер

Це може бути вирішенням також:

[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 :)

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

Я сподіваюся, що це комусь допоможе.

EDIT

Це змінює значення атрибута (кольору) на основі умови. Просто буває так, що колір визначається за допомогою директиви. Тому будь-хто, хто читає це, не плутайтесь, це не застосовує директиву умовно (тобто, це означає додавання та видалення директиви до дому на основі умови)