在父组件中显示来自子组件的按钮的结果 - Angular

Posted 2023-02-23

【中文标题】在父组件中显示来自子组件的按钮的结果 - Angular

【英文标题】：Display the result of a button from chlid component in parent component - Angular

【发布时间】：2021-07-13 11:44:04

【问题描述】：

我在 chlid 组件中有一个按钮，它有一个表单，单击该按钮时，它会添加到 DB 中并发出警报。我想在显示数据库中数据列表的父组件屏幕中显示警报。

html：

<button class="pt-primary adconfig-button" *ngIf="!isEditMode" [disabled]="!testSuccessful" (click)="storeNewConnection()">Add Configuration</button> 

TS：

        this.adService.addAdConfiguration(this.adConfigurationObj, this.isEditMode).subscribe((response) => 
            const msg: string = response.Status === ResultStatus.Success ? this.alerts.push(
                
                    msg: 'Configuration added successfully!',
                    type: 'success',
                    timeout: 3000
                ) : response.Details;
        );
    

        this.router.navigate(['/configuration/groups-permissions'],  state:  isAdConfig: true  );

我想路由到这个路径（父组件）并在那里显示警报。

如何实现？

【参考方案1】：

路由必须在订阅回调块内，以确保在异步调用this.adService.addAdConfiguration()响应后执行。

有多种方法可以使用 Angular 路由器传递数据。下面展示了如何利用可选参数。

发送方组件

this.adService.addAdConfiguration(this.adConfigurationObj, this.isEditMode).subscribe((response) => 
  const msg: string = response.Status === ResultStatus.Success 
    ? this.alerts.push(
        msg: 'Configuration added successfully!',
        type: 'success',
        timeout: 3000
      ) 
    : response.Details;

    this.router.navigate(
      [
        '/configuration/groups-permissions',
         message: JSON.stringify(msg) 
      ], 
       state:  isAdConfig: true  
    );
);

收件人组件

import  ActivatedRoute  from '@angular/router';

export class SomeComponent implements OnInit 
  message: any;

  constructor(private _actRoute: ActivatedRoute)  

  ngOnInit() 
    this.message = JSON.parse(this._actRoute.snapshot.paramMap.get(message));
  

编辑：错字ActivateRoute -> ActivatedRoute

【讨论】：

这里的_actRoute是什么？

参数属性private _actRoute: ActivatedRoute。原帖有错别字。它说ActivateRoute 而不是ActivatedRoute。我已经修改了答案。

也可以简单地称它为activatedRoute，前缀/缩写纯粹是一种自以为是的方式来显示来自构造函数的值。总体思路是将消息作为参数应用到 URL 上，然后在父级上解析来自 URL 的消息以显示它。