创建可重用 Angular UI 组件的最佳方法

Question

我想使用 Angular 2+ 来创建可重用的 UI 组件。 我一直在检查 material.angular.io，但我需要更具体的某些内容，我要说。

就像我想制作“Bootstrap 面板”之类的东西，或者我想制作一个特定的模板化材质卡，即，我可以根据需要重新使用该组件，并且设计保持一致。 它有一个标题、一个正文和一个页脚。 所有部分都可以包含 HTML。

我认为ng-content是实现这一目标的一种方式（工作方式类似于 angularjs 中的旧 transclude）。

使用ng-content被视为“最佳实践”？ 它的使用在未来被弃用的可能性有多大？

每个人如何创建代码可重用的“模板”或“容器”或“布局”？ 这样开发人员就不必继续编写样板 div 了？

其他选项是什么？

Answer 1

这实际上取决于您尝试为这些组件提供的用途。 如果您只想在一个应用程序中重用它们，那么我会在名为shared/components的文件夹中创建一个shared/components 。 然后我将这些组件注入到我想使用它们的地方。

如果我创建的东西是 shell 的一部分（如导航栏、侧边栏等），您可以将它们放在共享文件夹shared/shell然后将这些组件注入app.component.html

现在，如果您正在尝试制作可在不同应用程序中使用的可共享组件，那么您必须创建一个库，然后您可以将其部署到 NPM，然后在您的任何应用程序中使用它。 有多种方法可以做到这一点。

Answer 2

好吧，你可以创建一个Angular 库

简单来说，这就像任何其他模块（例如：sharedModule）。 创建所有 UI 组件，将配置和参数作为@Input()传递给它。 模块准备就绪后，构建并打包库并将其托管在 npm 中或将其保存在共享驱动器中。

稍后，当您创建新项目时，只需npm install您的库