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

时间:2019-09-07 07:11:52

标签: html angular angular-material

我想使用Angular 2+创建可重用的UI组件。 我一直在检查material.angular.io,但是有些事情我需要更具体些。

就像我想制作类似“引导面板”的东西一样,或者我想要制作特定的材料卡,该材料卡已模板化,即,我可以根据需要重复使用该组件,并且设计保持一致。它具有标题,正文和页脚。所有部分都可以包含HTML。

我认为ng-content是实现这一目标的一种方式(其工作方式与angularjs中的旧transclude相似)。

使用ng-content被认为是“最佳实践”吗?将来不建议使用它的机会是什么?

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

还有哪些其他选择?

2 个答案:

答案 0 :(得分:1)

这实际上取决于您要赋予这些组件的用法。如果您仅尝试在一个应用程序中重用它们,那么我将在名为shared/components的文件夹中创建一个组件。然后,将这些组件注入要使用的位置。

如果我要创建外壳程序中的一部分(例如导航栏,边栏等),则可以将它们放在共享文件夹shared/shell中,然后将这些组件注入app.component.html

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

答案 1 :(得分:1)

好吧,您可以创建一个Angular Library

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

稍后,当您创建新项目时,只需@Input()您的库