Question

使用Angular 5和Angular Material 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>

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

  <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

AFRAME.registerComponent("foo", {
 init: function() {
  this.objects = ["one", "two", "three"]
  this.iterator = 0
  this.left = AFRAME.utils.bind(this.left, this);
  this.right = AFRAME.utils.bind(this.right, this);
 },
 right: function() {
  let i = (this.iterator - 1) < 0 ? this.objects.length - 1 : this.iterator - 1
  this.toggle(this.iterator, i)
 },
 left: function() {
  let i = (this.iterator + 1) >= this.objects.length ? 0 : this.iterator + 1
  this.toggle(this.iterator, i)
 },
 toggle: function(oldEl, newEl) {
  document.getElementById(this.objects[oldEl]).setAttribute("visible", "false")
  document.getElementById(this.objects[newEl]).setAttribute("visible", "true")
  this.iterator = newEl
 }
})

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。

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

3 个答案: