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

标签 html angular angular-material

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

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

我将ng-content视为实现此目的的一种方法(与 angularjs 中旧的嵌入类似)。

使用 ng-content 是否被视为“最佳实践”?它的使用将来被弃用的可能性有多大?

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

还有哪些其他选择?

最佳答案

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

如果我正在创建一个属于 shell 一部分的东西(如导航栏、侧边栏等),您可以将它们放在共享文件夹 shared/shell 中,然后将这些组件注入(inject) app.component.html

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

关于html - 创建可重用 Angular UI 组件的最佳方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57831524/

相关文章:

php - NGX-Chart - 从服务获取图表数据时出现问题

angular - 从 Angular Material native 组件创建两个值范围 slider

Angular Material 5 : how to call a function when a tab is selected (clicked)?

html - 查询有关 Html <input type="password> 标签...?

javascript - 如何从本地文件夹(磁盘存储)读取或获取图像文件并使用nodejs服务器将其发送到Angularjs?

html - 在 div 之间的 div 中创建水平空间

css - Angular 在没有复制/粘贴代码的情况下渲染一个模板或另一个模板

javascript - 单击时的 div 重定向到另一个 HTML 页面并调用 javascript 以显示特定的 div

angular - 从 Angular 2 中的另一个模块导出服务

angular - *ngIf 条件未触发/不更新 ngOnChanges 中的模板