如何有条件地添加Angular Material指令

Question

使用Angular 5和Angular材质5。

我想有条件地添加mat-button或mat-menu-item指令。

我是用指令做的。

@Directive({
  selector: '[dynamic-attr]'
})
export class DynamicAttrDirective {
  @Input('dynamic-attr') attr: string;
  private _el: ElementRef;

  constructor(el: ElementRef,  private _renderer: Renderer) {
    this._el = el;
  }

  ngOnInit() {
    if (this.attr === '') return null;
    const node = document.createAttribute(this.attr);
    this._el.nativeElement.setAttributeNode(node);
  }
}

像这样：

<button dynamic-attr="{{ isCollapsed ? 'mat-menu-item' : 'mat-button'}}" [routerLink]="['/about']">About</button>

但是，虽然这会在结果标记中呈现属性，但不会应用“材质设计”样式和其他标记（用于涟漪等）。

  <div _ngcontent-c1="" app-nav-menu="" ng-reflect-is-collapsed="false"><button tabindex="0" ng-reflect-router-link="/about" mat-button="" ng-reflect-attr="mat-button">About</button>

我猜是需要像AngularJS的$ compile那样的东西。

我怎样才能做到这一点？

注意：理想情况下我想避免使用if / else。我想编写一次按钮的代码，只需切换指令（mat-button / mat-menu-item）

更新：我试图解决的问题是删除此导航栏中的重复按钮列表。导航栏包含两个工具栏，一个在桌面上显示，一个在移动设备上。我不想在每个工具栏中包含按钮，我更喜欢使用通用模板/指令/组件。但是按钮在每个工具栏中需要不同的材质指令。

<mat-toolbar color="primary" class="full-size">
    <span>
        <a [routerLink]="['/']">Brand</a>
    </span>
    <span class="fill-remaining-space"></span>
    <button mat-button [routerLink]="['/demo']">Demo</button>
    <button mat-button [routerLink]="['/about']">About</button>
    <button mat-button color="accent" [routerLink]="['/signup']">Sign Up</button>
</mat-toolbar>

<mat-toolbar color="primary" class="compressed">
    <span>
        <a [routerLink]="['/']">Brand</a>
    </span>

    <span class="fill-remaining-space"></span>

    <button mat-button [matMenuTriggerFor]="menu">Menu</button>
    <mat-menu #menu="matMenu">
        <div app-nav-menu [isCollapsed]="true"></div>
        <button mat-menu-item [routerLink]="['/demo']">Demo</button>
        <button mat-menu-item [routerLink]="['/about']">About</button>
        <button mat-menu-item color="accent" [routerLink]="['/signup']">Sign Up</button>
    </mat-menu>
</mat-toolbar>

我希望通过以下方式解决这个问题：...... ....

Answer 1

<button *ngIf="isCollapsed == true" ng dynamic-attr="mat-menu-item" [routerLink]="['/about']">About</button>

<button *ngIf= "isCollapsed == false" ng dynamic-attr="mat-button" [routerLink]="['/about']">About</button>

Answer 2

请改用：

<button *ngIf="isCollapsed;else matButton" ng dynamic-attr="mat-menu-item" 
[routerLink]="['/about']">About</button>

<ng-template #matButton>
  <button *ngIf= "isCollapsed == false" ng dynamic-attr="mat-button" 
  [routerLink]="['/about']">About</button>
</ng-template>

Answer 3

如果您唯一需要的是更改样式，则可以添加ngClass并覆盖该指令添加的当前类。例如：

      <button mat-stroked-button [ngClass]="{'mat-raised-button': view === 'show'}"
    color="primary" (click)="switchView('show')">Show</button>
      <button mat-stroked-button [ngClass]="{'mat-raised-button': view === 'edit'}"
    color="primary" (click)="switchView('edit')">Edit</button>

在此示例中，您将按钮设置为mat-stroked-button，但根据视图，它将样式更改为mat-raised-button。