我正在使用Material 2添加md-raised-button。我希望仅在特定条件成立时应用此指令。
例如：
<button md-raised-button="true"></button>
另一个例子：
我在 Plunker 中创建了一个基本的动态响应式表单。
我正在使用响应式表单的 formArrayName 指令来处理控件数组。
我想仅在特定条件为真时应用 formArrayName 指令，否则不添加 formArrayName 指令。
这里是一个Plunker链接。
我不知道您是否可以根据条件应用指令，但是一个解决方法是有2个按钮，并根据条件显示它们。
<button *ngIf="!condition"></button>
<button *ngIf="condition" md-raised-button></button>
编辑：或许这篇文章会有所帮助。
input 的子组件中，不必将 formGroup 包含进去，因为你可以通过在包装器组件内部传递 formControl 作为 @Input() control: FormControl 并通过 [formControl]="control" 应用于本地 input。 - Oleg K正如已经提到的，这似乎是不可能的。可以使用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，按钮的内容会被插入到两个位置。
<div>，具体取决于所需的文档结构。） - H.B.ContentChildren，则这不是一个选项。例如，mat-table组件内部元素不能放入模板插座中，因为找不到所需的标题、行和页脚定义。不幸的是，这就是我目前卡住的地方，必须复制一些HTML。 - B. Feenstra这可能有些晚了，但这是一种可行且优雅的方法，可以有条件地应用指令。
在指令类中创建输入变量：
@Input('myDirective') options: any;
应用指令时，设置输入变量的apply属性：
<div [myDirective] = {apply: someCondition}></div>
在指令的方法中，检查变量 this.options.apply 并根据条件应用指令逻辑。
ngAfterViewInit(): void {
if (!this.options.apply) {
return;
}
// directive logic
}
正如其他人所说，directive 无法动态应用。
然而，如果您只想从 flat 切换到 raised 来切换 md-button 的样式，则可以使用以下内容：
<button md-button [class.mat-raised-button]="isRaised">Toggle Raised Button</button>
这样就可以解决问题了。 Plunker
也许对某些人有帮助。
在下面的示例中，我有一个my-button.component.html文件，并且只想在role属性被设置时将*appHasPermission指令应用于<button>元素。
<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> 的代码。*ngIf="condition" 来控制它。 - DFSFOT[md-raised-button]="condition ? 'true' : ''"
[color]="condition ? 'primary' : ''" 其中 `condition` 是一个函数，决定这是否是一个活动页面。整个代码如下所示：
<button *ngFor="let page of ..." [color]="isActivePage(page) ? 'primary' : ''">{{ page.title }}</button>
null 给指令会将其移除！<button md-raised-button="condition ? true : null"></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);
}
}
@HostBinding('attr.dynamic-attr') @Input('dynamic-attr') attr: string;代替ngOnInit + ElementRef。 - pinguinjkeke