Angular 库 - 我可以导入组件代码吗?

Angular library - Can I import the components code?

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

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

例如:

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

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

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

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

我认为你的问题是编程原则而不是编程逻辑。让我解释一下:

您的可重用组件应该能让您更轻松地开发表示层。这意味着,样式、行为以及与表示相关的所有其他内容都应由组件处理,尽可能少地了解其他组件。这称为解耦,这些组件通常称为'dumb components.'

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

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

记住:你希望你的组件尽可能少地相互了解(因此它们是超级可重用的),并且只做一件事并且只做一件事(展示、授权、列表功能、table-component, modal-component), 然后像一个奇怪的乐高积木一样把它们拼在一起。

所以,简而言之,您可以通过在 'smart components' 中创建它们来处理更复杂的组件,这些组件只不过是通过 'smart component' 胶水(这是对它)。

您使组件能够完成所有工作的范式,这就是为什么有数百万个库可以做一件事,但必须下载 30Mb 并放置一百万个配置选项才能使它 运行。自己动手更容易、更简单。并做到申请你的产品。

希望对您有所帮助! :)