Angular 中的不同组件是否有组件保存按钮触发操作？

Question

我有一个使用 NGPrime 数据表的 angular 组件....当用户选择一行时，他们会得到一个弹出组件，让他们可以编辑数据....在他们编辑数据后，他们可以单击 'save' 按钮。如何将保存按钮单击操作发送到具有数据表的组件，以便触发数据刷新？

Answer 1

使用服务在组件之间建立公共 link。

假设当用户从那里点击您的组件弹出窗口时，您应该传递一个事件发射器，它将在 table 组件中被监听。所以table组件可以提供table.

的reload

Answer 2

你有几种方法。

如果它们是不相关的组件则

通用服务

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
@Injectable()
export class ShareService  {   
  constructor() { } 
  private paramSource = new BehaviorSubject("");
  sharedData = this.paramSource.asObservable();
  setParam(param:string) { this.paramSource.next(param)}    
}

在 appmodule 中放入 providers

providers:[ShareService ]

在组件中放入构造函数

constructor(private shareService: ShareService  ){}

从第一个组件发送赞

this.shareService.setParam('Sending param');

从第二个组件收到喜欢

 this.shareService.sharedData.subscribe(data=> { console.log(data); })

路由方法

你可以把参数放在路由器里然后发送。您可以像 routing.ts

一样将路由器设为参数化

{ path: 'component/:param', component: RelatedComponent },

然后在组件中你想在构造函数中像 import ActiveRoute 一样调用它

constructor(private route: ActivatedRoute){}

this.route.snapshot.paramMap.get('param')

或者如果你不想在路由中显示参数，你可以像下面的代码一样发送状态

this.router.navigate(['your_component_url'], {state: { param: 'data you send' } });

读取构造函数中的状态this.router.getCurrentNavigation().extras.state.param;

存储方式

您可以设置为 localStorage 或 sessionStorage，然后从另一个组件的存储中获取。

localStorage.setItem("param","parameter")

localStorage.getItem("param")

如果它们是父子组件，那么您也可以执行上述操作，并且可以使用

@输入法

<your_child_component param="{{ parameter}}"></your_child_component>

在子组件中 getlike

@Input param;

Angular 中的不同组件是否有组件保存按钮触发操作？

Have components Save button trigger action on different component in Angular?

primeng

angular