角 - 定制元素与角材料结合

Question

这里是我当前的按钮实现：

import { Component } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';

@Component({
  selector: 'button[m-primary-btn]',
  template: '<ng-content></ng-content>',
  styleUrls: ['./button.component.scss'],
  standalone: true,
  imports: [MatButtonModule],
  host: {
    'class': 'primary'
  }
})
export class PrimaryButtonComponent {}

我试图将MAT-FLAT-BUTTON指令添加到选择器和模板中，但没有成功。有人有任何建议吗？另外，我想避免手动将材料指令添加到每个按钮实例中。 您可以在OnInit或组件主机中手动添加属性 在下面尝试用作主机

@Component({
  selector: 'button[m-primary-btn]',
  template: `<ng-content></ng-content>`,
  styleUrls: ['./m-primary-btn.component.scss'],
  standalone: true,
  imports: [MatButtonModule],
  host: {
    'class': 'mat-flat-button',
    '[attr.mat-flat-button]': "''",
    '[attr.color]': 'color',
  },
})
export class MPrimaryBtnDirective {
  @Input() color: 'primary' | 'accent' | 'warn' = 'primary';
}

Answer 1