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

标签 angular code-reuse angular-library

我开始为 Angular 创建自己的组件库。主要原因是我想在未来的项目中重用组件以提高工作效率并节省时间。

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

例如:

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

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

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

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

最佳答案

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

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

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

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

请记住:您希望组件之间的了解尽可能少(因此它们具有 super 可重用性),并且只做一件事(演示、身份验证、列表功能、表格组件、模式)组件),然后像奇怪的乐高积木一样将它们组合在一起。

因此,简而言之,您可以通过在“智能组件”中创建更复杂的组件来处理它们,这些组件只不过是通过“智能组件”胶水(这是对其有意义的逻辑)组合在一起的dumb组件。

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

希望这有帮助! :)

关于Angular 库 - 我可以导入组件代码吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59145987/

相关文章:

Angular 库 - 使用 APP_INITIALIZER 将参数传递给服务

java - 如何处理从 servlet 中的 Angular 应用程序发送的预检请求?

html - Angular Material 2 : mat-button css to look like mat-button-toggle

html - 创建组件模板以多次使用它 - Angular

asp.net-mvc - 服务器控件在 ASP.Net MVC 中的什么位置?

angular - Yarn 工作区隔离

javascript - 将多个用户图像上传到 Firestore 集合的最佳方法是什么?使用 Angular/Ionic 4

.net - 每个开发人员的工具箱中都应该有哪些可重用代码?

testing - 从测试中重构 JUnit 规则

具有子入口点循环依赖的 Angular 9 库