如何使用最佳约定规则使我的 Angular 5 应用程序按预期工作？

Posted 2023-02-23

【中文标题】如何使用最佳约定规则使我的 Angular 5 应用程序按预期工作？

【英文标题】：How to make my Angular 5 app works as expected by using best convention rules?

【发布时间】：2018-09-09 06:55:41

【问题描述】：

我正在学习 Angular，我想构建一个具有如图所示的仪表板的应用，

左侧会有一些类别，如产品、员工、客户等，我想在其中添加编辑或删除 与产品、员工、客户等相关的数据，因此当我在绘制时单击任何类别时，应该打开例如 产品列表，并通过选择其中任何一个我想编辑或删除其中任何一个，并添加新的

所以我想知道如何实现这些关于添加、删除、删除产品的内容，例如， 我是否应该在那里创建一个嵌套组件，该组件将具有添加、删除、编辑按钮和另一个应该包含的大组件 保存产品列表和那 3 个按钮？

或者这应该怎么做？

是否可以为我的所有类别使用这 3 个按钮，因为它们都有添加、编辑、删除功能，但我不知道如何为所有类别使用它，因为所有类别正在向数据库添加不同的东西？

谁能给我一些关于这个任务的提示，非常感谢大家！

【参考方案1】：

一般的想法是为您的应用程序的自包含单元创建单独的组件，在您的情况下，您很可能有一个 sidenav 组件，它将包含您的不同类别，一个 activeCategory 组件，它将显示与当前选择的类别（即产品）相关的信息和一个options 组件，该组件将具有添加、删除等功能。

我的建议是通过 Angular 5 官方tutorial，它涵盖了从头开始构建现代 Angular 应用程序的所有主要方面。然后，您可以重用和调整这些概念来实现您的想法。

【参考方案2】：

回答这个问题，

是否可以为我的所有类别使用这 3 个按钮，因为它们都有添加、编辑、删除功能，但我不知道如何为所有类别使用它，因为所有类别正在向数据库添加不同的内容？

是的。您可以创建通用服务/组件以使用相同的按钮来处理所有项目的命令。你可以使用 EventEmitter 来实现。

我会建议你开始编码看教程，你会得到一些想法，如果没有，那么人们可以帮助你解决你将面临的问题。

编码愉快！