角度 6 中动态组件或路由的方法答案

【问题标题】：Way to go for dynamic components or routes in angular 6角度 6 中动态组件或路由的方法
【发布时间】：2019-03-07 14:35:07
【问题描述】：

我们有一个 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() 函数中动态添加子路径。选择“添加新单元”选项时，我们使用DataService将当前产品数据（组件状态？）保存在OnDestroy（）函数中。创建新单元后，我们重定向回产品页面并加载未保存的产品数据。

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

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

谁能指出我们正确的方向？感谢所有帮助/cmets。

【问题讨论】：

标签： angular

【解决方案1】：

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

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

【讨论】：