我正在使用Material 2添加md-raised-button
。我只想在某些条件为真时才应用此指令。
例如:
<button md-raised-button="true"></button>
另一个例子:我在plunker中创建了一个基本的动态反应形式。我正在使用formArrayName
反应形式的指令用于控件数组。我只想formArrayName
在特定条件为真时应用指令,否则不要添加formArrayName
指令。
这是一个矮胖的链接。
我正在使用Material 2添加md-raised-button
。我只想在某些条件为真时才应用此指令。
例如:
<button md-raised-button="true"></button>
另一个例子:我在plunker中创建了一个基本的动态反应形式。我正在使用formArrayName
反应形式的指令用于控件数组。我只想formArrayName
在特定条件为真时应用指令,否则不要添加formArrayName
指令。
这是一个矮胖的链接。
Answers:
我不知道您是否可以根据条件应用指令,但是一种解决方法是让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
属性将不存在。
更新: punker更新:fork(版本问题已修复,请注意,该问题最初是基于angular 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;
应用指令时,请设置输入变量的apply属性:
<div [myDirective] = {apply: someCondition}></div>
在指令的方法中,检查变量this.options.apply并根据条件应用指令逻辑:
ngAfterViewInit(): void {
if (!this.options.apply) {
return;
}
// directive logic
}
正如其他人也指出的那样,directives
不能动态应用。
但是,如果您只想将md-button
的样式从flat切换为凸起,则此
<button md-button [class.mat-raised-button]="isRaised">Toggle Raised Button</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>
@HostBinding('attr.dynamic-attr') @Input('dynamic-attr') attr: string;
ngOnInit + ElementRef代替。
也许会帮助某人。
在下面的示例中,我具有,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>
代码。
是的,有可能。
带有appActiveAhover指令的html页面:)
<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>
md-raised-button
属性设置为false)
关于您可以做什么,我有了另一个想法。
您可以将要替换的html作为字符串存储在变量中,然后使用DomSanitizer的bypassSecurityTrustHtml
方法根据需要从中添加/删除指令。
我没有一个干净的解决方案,但至少您不需要重复代码。
截至2019年1月18日,这就是我在Angular 5及更高版本中有条件地添加指令的方式。我需要基于更改<app-nav>
组件的颜色darkMode
。页面是否处于暗模式。
这对我有用:
<app-nav [color]="darkMode ? 'orange':'green'"></app-nav>
我希望这可以帮助别人。
编辑
这将根据条件更改属性(颜色)的值。碰巧颜色是使用指令定义的。因此,请阅读此书的任何人都不要感到困惑,这不是有条件地应用指令(即,这意味着根据条件向dom添加或删除指令)