从 Angular 材质组件扩展答案

【问题标题】：Extending from Angular Material Components从 Angular 材质组件扩展
【发布时间】：2020-09-29 22:01:19
【问题描述】：

在我的 Angular 项目中，我想扩展/继承 Angular 材质组件，而不是使用材质组件本身（例如，不是 mat-checkbox，而只是扩展 mat-checkbox 的常规复选框）。通过这种方式，我想从 mat 复选框继承所有属性和方法。不幸的是，我面临编译错误。您可以在下面找到 stackblitz 的链接，您可以在其中查看项目和错误本身

https://stackblitz.com/edit/angular-material-hulqfu?file=app%2Fcheckbox%2Fcheckbox.component.ts

请查看控制台中的错误。

【问题讨论】：

嗨，我看到了，你是 Angular 框架的新手，是吗？首先，您的 stackblitz 项目构建得很糟糕，您没有主模块 (AppModule)。所有组件都必须在核心或功能模块中声明。其次，我不确定您要执行什么，如果您想自定义复选框材质组件，您可以创建一个包装器组件并对其进行自定义。
没错，消息的原因是Angular的app.module必须知道组件。该项目不是使用 ng new ProjectName 创建的。
感谢大家的回复，首先@ChristianGálvez 我不是 Angular 世界的新手，stackblitz 只是为了展示我们在本地环境中需要做什么，所有声明都已完成，appModule 已完成相应地更新，John Peters，我们已经尝试过这种方法，但现在我们试图弄清楚我们是否可以直接从材料组件扩展
@ChristianGálvez 我已经更新了 stackblitz 现在你可以看到错误了。希望这是有道理的。

标签： javascript angular typescript inheritance angular-material

【解决方案1】：

为了能够继承任何 Material 组件，您首先需要安装库并将其添加到项目中： https://material.angular.io/guide/getting-started.

之后，我建议您通过尝试使用 AppComponent（或任何已声明的组件）中的 MatCheckbox 来验证所有设置是否正确。请记住之前将 MatCheckboxModule 添加到导入部分的 AppModule（或其相应模块）中。

一旦您没有任何类型的错误，您就可以创建一个从相应 Material 组件扩展而来的组件。不要忘记在声明部分导入它。

这应该可以工作，因为它只是 Typescript 继承，尽管我不确定你想要完成什么以及继承是否是实现它的最佳方式。

【讨论】：