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

【问题标题】：Display the result of a button from chlid component in parent component - Angular在父组件中显示来自子组件的按钮的结果 - 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 } });

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

如何实现？

【问题讨论】：

标签： angular typescript components parent-child

【解决方案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 的消息以显示它。