Применить директиву условно

Я использую Материал 2, чтобы добавить md-raised-button. Я хочу применять эту директиву только в том случае, если определенное условие становится истинным.

Например:

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

Другой пример: Я создал базовую динамическую реактивную форму в плункере. Я использую директиву formArrayName реактивной формы для массива элементов управления. Я хочу применять директиву formArrayName, только если конкретное условие становится истинным, в противном случае не добавляйте директиву formArrayName.

Вот плункерная ссылка.

ОТВЕТЫ

Ответ 1

Я не знаю, можете ли вы применять директивы на основе условия, но обходной путь будет иметь 2 кнопки и отображать их на основе условия.. p > 

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

Изменить: возможно этот будет полезен.

Ответ 2

Вы можете использовать следующий метод:

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

Применил то же самое к вашему поршню: fork

Обновить:

Как condition? '': null condition? '': null работает как значение:

Когда это пустая строка (''), оно становится attr.md-raised-button="", когда его null атрибут не будет существовать.

Обновление: обновление плункера: форк (исправлены проблемы с версией, обратите внимание, что вопрос изначально был основан на angular 4)

Ответ 3

Как уже отмечалось, это не представляется возможным. Одна вещь, которая может быть использована, по крайней мере, для предотвращения дублирования, - это ng-template. Это позволяет вам извлечь содержимое элемента, затронутого ветвлением ngIf.

Если вы, например, хотите создать иерархический компонент меню, используя Angular Материал:

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

Ответ 4

Это может зайти поздно, но это жизнеспособный и изящный способ условного применения директивы.

В классе директивы создайте входную переменную:

@Input('myDirective') options: any;

При применении директивы задайте свойство apply входной переменной:

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

В методе директивы проверьте переменную this.options.apply и примените логику директивы на основе условия:

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

    // directive logic
}

Ответ 5

Как уже говорили другие, directives не могут применяться динамически.

Однако, если вы просто хотите переключить стиль md-button с плоской на поднятую, то это

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

сделал бы трюк. Plunker

Ответ 6

В настоящее время существует способ NO условно применить директиву к компоненту. Это не поддерживается. Компоненты, которые вы создали, могут быть добавлены или удалены условно.

Уже создана проблема для angular2, так что это должно быть так с угловым 4.

В качестве альтернативы вы можете перейти к опции с помощью ng-if

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

Ответ 7

да, возможно.

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

}

Ответ 8

Я не мог найти хорошее существующее решение, поэтому я создал свою собственную директиву, которая делает это.

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>

Ответ 9

Это тоже может быть решение:

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

Он работает для angular 4, ионный 3, как это:

[color]="condition ? 'primary' : ''" где condition - это функция, которая решает, является ли это активной страницей или нет. Весь код выглядит следующим образом:

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

Ответ 10

Используйте 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>

Ответ 11

У меня появилось другое представление о том, что вы можете сделать.

Вы можете сохранить html, который вы хотите заменить в переменной как строку, а затем добавить/удалить директиву из него, как вам угодно, используя метод bypassSecurityTrustHtml DomSanitizer.

Я не приведу к чистому решению, но, по крайней мере, вам не нужно повторять код.

Ответ 12

По состоянию на 18 января 2019 года я так условно добавил директиву в Angular 5 и выше. Мне нужно было изменить цвет компонента <app-nav> на основе darkMode. Если страница была в темном режиме или нет.

Это сработало для меня:

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

Я надеюсь, что это помогает кому-то.

РЕДАКТИРОВАТЬ

Это изменяет значение атрибута (цвета) в зависимости от условия. Просто бывает, что цвет определяется с помощью директивы. Таким образом, любой, кто читает это, пожалуйста, не смущайтесь, это не применяет директиву условно (то есть означает добавление или удаление директивы к dom на основе условия)