Angular动态设置属性及Angular 7中Mat按钮指令创建咨询

我来帮你逐一解决这两个Angular相关的问题：

在Angular里动态设置属性有几种常用的方式，根据场景不同可以灵活选择：

• 属性绑定语法（最常用）
  针对HTML原生属性用 [attr.属性名]，针对DOM元素的内置属性直接用 [属性名]，非常直观：

  <!-- 动态设置HTML属性（比如自定义id） -->
  <div [attr.id]="'user-card-' + userId">用户卡片</div>
  
  <!-- 动态设置DOM元素属性（比如按钮禁用状态） -->
  <button [disabled]="isSubmitDisabled">提交表单</button>
  

  组件内只需定义对应的变量即可：

  userId = 1001;
  isSubmitDisabled = true;
  

• 使用Renderer2服务（适合指令/操作DOM场景）
  如果是在指令中或者需要更安全的DOM操作（避免直接操作nativeElement），推荐使用Angular提供的Renderer2服务：

  import { Component, Renderer2, ElementRef, OnInit } from '@angular/core';
  
  @Component({
    selector: 'app-custom-element',
    template: '<p>示例文本</p>'
  })
  export class CustomElementComponent implements OnInit {
    constructor(private renderer: Renderer2, private el: ElementRef) {}
  
    ngOnInit() {
      // 给宿主元素动态设置title属性
      this.renderer.setAttribute(this.el.nativeElement, 'title', '鼠标悬停显示');
    }
  }
  

• 使用@HostBinding装饰器（指令/组件宿主绑定）
  在指令或组件中，可以用@HostBinding直接绑定宿主元素的属性、类或样式：

  import { Directive, HostBinding, Input } from '@angular/core';
  
  @Directive({
    selector: '[appDynamicState]'
  })
  export class DynamicStateDirective {
    // 动态绑定自定义属性
    @Input() @HostBinding('attr.data-status') status: string = 'default';
    // 动态绑定disabled属性
    @HostBinding('disabled') isDisabled = false;
  
    ngOnInit() {
      this.isDisabled = true; // 初始化时设置禁用
    }
  }
  

  使用时直接传入参数即可：

  <button appDynamicState [status]="'active'">状态按钮</button>
  

针对Angular 7项目中结合Angular Material和ngx-form-schema的需求，我们可以做一个指令来动态控制Mat按钮的类型。核心思路是：指令接收按钮类型参数，动态添加对应的Material按钮CSS类，同时移除其他冲突的按钮类。

步骤1：创建按钮类型指令 #

新建mat-button-type.directive.ts文件：

import { Directive, Input, ElementRef, OnInit, OnChanges, SimpleChanges } from '@angular/core';

// 定义所有支持的Mat按钮类型
type MatButtonType = 'mat-button' | 'mat-flat-button' | 'mat-raised-button' | 'mat-stroked-button' | 'mat-icon-button' | 'mat-fab' | 'mat-mini-fab';

@Directive({
  selector: '[appMatButtonType]'
})
export class MatButtonTypeDirective implements OnInit, OnChanges {
  // 接收外部传入的按钮类型，默认用基础按钮
  @Input() appMatButtonType: MatButtonType = 'mat-button';

  // 维护所有Material按钮类的集合，用于清理旧类
  private allButtonClasses: MatButtonType[] = [
    'mat-button',
    'mat-flat-button',
    'mat-raised-button',
    'mat-stroked-button',
    'mat-icon-button',
    'mat-fab',
    'mat-mini-fab'
  ];

  constructor(private el: ElementRef) {}

  ngOnInit() {
    this.updateButtonClass();
  }

  ngOnChanges(changes: SimpleChanges) {
    // 当按钮类型变化时更新类
    if (changes['appMatButtonType']) {
      this.updateButtonClass();
    }
  }

  private updateButtonClass() {
    // 先移除所有旧的按钮类，避免多个类叠加导致样式冲突
    this.allButtonClasses.forEach(className => {
      this.el.nativeElement.classList.remove(className);
    });
    // 添加当前选中的按钮类
    this.el.nativeElement.classList.add(this.appMatButtonType);
  }
}

步骤2：在模块中注册指令 #

在你的模块（比如app.module.ts）中导入并声明指令，同时确保已经导入Angular Material的按钮模块：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatButtonModule } from '@angular/material/button';
import { MatButtonTypeDirective } from './mat-button-type.directive';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent,
    MatButtonTypeDirective
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatButtonModule // 必须导入Material按钮模块
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

步骤3：使用指令 #

在模板中直接传入按钮类型即可，结合ngx-form-schema时，只需绑定schema中定义的按钮类型字段：

<!-- 凸起按钮 -->
<button appMatButtonType="mat-raised-button">提交</button>

<!-- 扁平按钮 -->
<button appMatButtonType="mat-flat-button">取消</button>

<!-- 结合ngx-form-schema使用 -->
<button appMatButtonType="{{ formSchema.buttonConfig.type }}">{{ formSchema.buttonConfig.text }}</button>

这个指令会自动帮你管理按钮的CSS类，确保同一时间只有一种按钮类型生效，避免样式冲突。

内容的提问来源于stack exchange，提问作者Mostafa Farhani