Я использую Материал 2, чтобы добавить md-raised-button. Я хочу применять эту директиву только в том случае, если определенное условие становится истинным.
Например:
<button md-raised-button="true"></button>
Другой пример:
Я создал базовую динамическую реактивную форму в плункере.
Я использую директиву formArrayName реактивной формы для массива элементов управления.
Я хочу применять директиву formArrayName, только если конкретное условие становится истинным, в противном случае не добавляйте директиву formArrayName.
Вот плункерная ссылка.
Я не знаю, можете ли вы применять директивы на основе условия, но обходной путь будет иметь 2 кнопки и отображать их на основе условия.. p >
<button *ngIf="!condition"></button>
<button *ngIf="condition" md-raised-button></button>
Изменить: возможно этот будет полезен.
Вы можете использовать следующий метод:
<button [attr.md-raised-button]="condition? '': null"></button>
Применил то же самое к вашему поршню: fork
Обновить:
Как condition? '': null condition? '': null работает как значение:
Когда это пустая строка (''), оно становится attr.md-raised-button="", когда его null атрибут не будет существовать.
Обновление: обновление плункера: форк (исправлены проблемы с версией, обратите внимание, что вопрос изначально был основан на angular 4)
Как уже отмечалось, это не представляется возможным. Одна вещь, которая может быть использована, по крайней мере, для предотвращения дублирования, - это 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.
Это может зайти поздно, но это жизнеспособный и изящный способ условного применения директивы.
В классе директивы создайте входную переменную:
@Input('myDirective') options: any;
При применении директивы задайте свойство apply входной переменной:
<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
В настоящее время существует способ NO условно применить директиву к компоненту. Это не поддерживается. Компоненты, которые вы создали, могут быть добавлены или удалены условно.
Уже создана проблема для angular2, так что это должно быть так с угловым 4.
В качестве альтернативы вы можете перейти к опции с помощью ng-if
<button ngIf="!condition"></button>
<button ngIf="condition" md-raised-button></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');
}
}
}
Я не мог найти хорошее существующее решение, поэтому я создал свою собственную директиву, которая делает это.
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>
Это тоже может быть решение:
[md-raised-button]="condition ? 'true' : ''"
Он работает для angular 4, ионный 3, как это:
[color]="condition ? 'primary' : ''" где condition - это функция, которая решает, является ли это активной страницей или нет. Весь код выглядит следующим образом:
<button *ngFor="let page of ..." [color]="isActivePage(page) ? 'primary' : ''">{{ page.title }}</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>
Я надеюсь, что это помогает кому-то.
РЕДАКТИРОВАТЬ
Это изменяет значение атрибута (цвета) в зависимости от условия. Просто бывает, что цвет определяется с помощью директивы. Таким образом, любой, кто читает это, пожалуйста, не смущайтесь, это не применяет директиву условно (то есть означает добавление или удаление директивы к dom на основе условия)