包裹或扩展 Angular Material 组件以创建自定义组件

Question

我对 Angular 很陌生/来自 UI 设计方面，所以我的术语和对基本 Angular 概念的理解是有限的。

我的团队已经开始使用 Angular Material 构建一个网站，作为设计师，我正在尝试确定如何平衡像 Material 这样的开箱即用工具的好处与需要相当多的定制（主要是在样式）。

我想在现有的 Material 组件之上构建一个自定义库。我还想对其进行结构化，使其非常模块化——即，与其使用巨大的/单一的 HTML 和 CSS 文件进行操作，不如使用单独的、较小的按钮组件等，并使用它们自己独立的 HTML 和 CSS。

我试图做的只是将一个 Angular Material 组件包装在我创建的新组件中，如下所示：

button.component.ts:

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'ui-button',
  templateUrl: './button.component.html',
  styleUrls: ['./button.component.less']
})
export class ButtonComponent implements OnInit {
  @Input()
  color;
  disableRipple: boolean;

  constructor() {}

  ngOnInit() {}
}

button.component.html：

<button mat-button [color]="color" [disableRipple]="true">
  <ng-content></ng-content>
</button>

我知道我必须“传递”一些属性；还没有那么远。我遇到的问题是我试图解决这个问题的方式导致了一个新的 DOM 元素，“ui-button”，我宁愿没有一个，因为它会导致焦点问题等。有没有一些其他方法来做到这一点？一些扩展 Angular Material 组件的方法？