首页 文章

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

提问于
浏览 次
0

使用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那样的东西 .

我怎样才能做到这一点？

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

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

<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>

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

angular angular-material

3 回答

  • 0
    <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>
    回复于
  • 0

    改为使用它：

    <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>
    回复于
  • 0

    如果您唯一需要的是更改样式，则可以添加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 .

    回复于

相关问题