Angular 库 - 我可以导入组件代码吗？答案

【问题标题】：Angular library - Can I import the components code?Angular 库 - 我可以导入组件代码吗？
【发布时间】：2020-03-27 11:35:42
【问题描述】：

我开始制作自己的 Angular 组件库。主要原因是我想在未来的项目中重用组件以提高生产力并节省时间。

现在我可以在任何新项目中安装我的库并重复使用我的组件。

例如：

<div>
  <ng-mylib-simple-spinner></ng-mylib-simple-spinner>
</div>

问题是如何处理更复杂的组件？

如果我需要从用户那里获取数据并将其传递给服务或其他组件，我该怎么办？例如登录表单组件，或者如果我想重用导航栏并更改我的RouterLink 链接等。

如何在新项目中更改库组件的模板和逻辑？我的方法应该是什么？

【问题讨论】：

复杂的组件可能不适合成为库的一部分
你的问题太宽泛了。如果您需要一些模板调整（例如菜单的不同布局），您可以使用 ContentChild 以便您拥有默认模板以及覆盖它的选项
@bryan60 采用角度材料。它相当复杂，非常适合作为库。
@Sergey Angular Material 不提供登录表单或从用户那里收集信息的任何东西，除了表单助手和一些低级表单组件。也许“复杂”不是正确的词，但“具体”的东西不是图书馆的理想选择
@bryan60 看看 CDK。它有很多参数。如果它可以跨项目重用，那么它必须被重用。例如，我有一个复杂的自建库，用于处理跨项目共享的选项卡。它开始消耗大量数据，但它很容易重用，并且有机会覆盖预定义的模板以实现其他一些选项卡布局。这一切都取决于情况

【解决方案1】：

我认为，您的问题在于编程原理而不是编程逻辑。让我解释一下：

您的可重用组件应该使您更容易开发表示层。这意味着，样式、行为以及与表示相关的所有其他内容都应由组件处理，尽可能少地了解其他组件。这称为解耦，这些组件通常称为“哑组件”。

当您希望您的可重用组件处理 API 请求和其他与演示无关的事情时，他们知道的太多了。它们是耦合的，而不是提供它们的功能：重用演示文稿。

如果您想重用逻辑，您可以创建一个与表示分离的服务，它应该处理特定的服务逻辑。然后，您将愚蠢的组件放入其中以创建视图，并且您正在以正确的方式节省时间。

请记住：您希望您的组件彼此之间尽可能少地了解（因此它们是超级可重用的），并且只做一件事和一件事（演示文稿、身份验证、列表功能、表格组件、模态-组件），然后将它们像一个奇怪的乐高积木一样放在一起。

因此，简而言之，您可以通过在“智能组件”中创建更复杂的组件来处理更复杂的组件，这些组件只不过是由“智能组件”胶水组合在一起的愚蠢组件（这是对它有意义的逻辑）。

使组件能够完成所有工作的范例，这就是为什么有数以百万计的库可以做一件事，但必须下载 30Mb 并放置一百万个配置选项才能使其运行.自己做会更容易和更简单。并这样做以申请您的产品。

希望这会有所帮助！ :)

【讨论】：