角度6中动态零件或路线的行驶方式

Question

我们有一个Angular 6企业应用程序，该产品已为产品实现了CRUD。我们有以下路线：

{ path: 'modules/products', component: ProductsComponent, data: { permission: 'Pages.Products' }  },
{ path: 'modules/products/view-product', component: ViewProductComponent, data: { permission: 'Pages.Products' } },
{ path: 'modules/products/create-or-edit-product', component: CreateOrEditProductComponent, data: { permission: 'Pages.Products.Edit' } },

现在，从产品页面中，我们想创建一个带有“添加新单元”选择选项的“单元”选择框组件。选择此选项时，我们希望将用户路由到创建单位路径，而又不会丢失他尚未在产品视图中保存的更改。

面包屑看起来像这样：

主页>产品>编辑Prod01>新建单元

我们正在寻找实现这一目标的最佳实践。 我们谨记以下做法：

1。使用动态子路线

从单元选择框组件的onInit（）函数动态添加子路径。当选择“添加新单位”选项时，我们使用数据服务将当前产品数据（组件状态？）保存在onDestroy（）函数中。创建新单位后，我们将重定向回产品页面并加载未保存的产品数据。

2。使用隐藏/显示多个组件

在产品页面上选择“添加单位”选项时，我们会在页面上动态添加“添加单位”组件，并在隐藏产品组件的同时进行显示。创建新单位后，我们将隐藏/删除“添加单位”组件并显示产品组件。

有人能指出我们正确的方向吗？所有帮助/评论表示赞赏。

Answer 1

在我看来，第二个选择更好，更自然。第一种选择涉及更多的开销，如果在更多的组件中使用它，可能会臭名昭著。忘记某事的机会也更高，使此选项更容易出错。

但是，除了您提供的选项之外，为什么不利用Angular路由器提供的功能（可能适合您的用例）呢？看一下auxiliary routes。使用此解决方案，您不必明确关心动态组件管理，而可以将其传递给Angular的Router，后者将以干净安全的方式进行处理。