Question

我有三个部分，主页（简单地是一个欢迎页面，带有指向AllCustomers视图的链接），AllCustomers（所有客户的列表以及一些功能按钮）和AddEdit（一种可以添加/编辑客户的表单））。单击按钮上的AllCustomers组件后，将显示AddEdit组件。我的问题是如何添加输入和输出功能，以允许组件交互到应用程序路由中。

这是我的app.component.html

<router-outlet></router-outlet>


<all-customers #allCustomers (add)="input.addCustomersNow()" (edit)="input.editCustomerNow($event)"></all-customers>
<add-edit-customer #input (ok)="allCustomers.refresh()"></add-edit-customer>

我知道这是错误的，并且无法完全按照我想要的方式工作，但让我尝试解释一下我的困难。我该如何添加例如：“ #allCustomers（add）=” input.addCustomersNow（）“（edit）=” input.editCustomerNow（$ event）“将此信息添加到我的路线中。

以下是我的路线：

const routes: Routes = [
    { path: '', redirectTo: '/homepage', pathMatch: 'full'},
    { path: 'homepage', component: HomepageComponent },
    {
      path: 'allCustomers',
      component: AllCustomersComponent,
      children: [
        { path: 'addEdit', component: AddEditCustomerComponent }
      ]
     },
]

Answer 1

我认为您需要为应用程序提供状态管理，您可以使用ngrx或仅将服务用作状态存储，然后将其注入您使用的组件中，这将使您的应用程序更加健壮和可维护。

Answer 2

最佳实践是实施单一责任理论。因此您必须隔离AddEditCustomerComponent的功能。让我解释。您只需将id参数传递给该组件，并且无论何时要添加新的记录传递-1。当您要进行编辑时，可以将该记录的唯一ID传递给组件，然后通过服务从与该ID相关的组件中获取数据，并让用户进行更新。这样，您可以实施删除并查看AllCustomersComponent列表上的某行是否单击

const appRoutes: Routes = [
{ path: 'homepage', component: HomepageComponent },
{
    path: 'allCustomers',
    component: AllCustomersComponent,
    children: [
        { path: 'addEdit/:id', component: AddEditCustomerComponent }
    ]
},
{
    path: '',
    redirectTo: '/homepage',
    pathMatch: 'full'
},
{ path: '**', component: PageNotFoundComponent }

我刚刚更改了这一行

{ path: **'addEdit/:id'**, component: AddEditCustomerComponent }

希望这对您有用

将输入和输出添加到组件选择器

2 个答案: