javascript - @output - 从子组件调用父组件中的函数 - Angular

Question

我有一个父组件和一个子组件。子组件中有一个表单和按钮。单击时，它会在 DB 中添加表单详细信息，并显示添加成功的结果并重定向到父组件页面。

我希望结果在重定向到父页面时显示在父页面上。

这是我所拥有的：

父组件.html

    <div>
        <apm-configuration-list (AddUpdateConfigEvent) = AddUpdateConfigEvent($event)></apm-configuration-list>
    </div>
    <div class="mt-1">
        <alert *ngFor="let alert of alerts;let i = index" [type]="alert.type" dismissible="true"
            [dismissOnTimeout]="alert.timeout" (onClosed)="closeAlert(i)">
            <div [innerHTML]="alert?.msg"></div>
        </alert>
    </div> 

子组件.ts

Output() AddUpdateConfigEvent: EventEmitter<any> = new EventEmitter();

public updateConnection() {
        this.adService.addAdConfiguration(this.adConfigurationObj, this.isEditMode).subscribe((response) => {
            if (response.Status === ResultStatus.Success) {
                this.AddUpdateConfigEvent.emit();
                this.router.navigate(['/configuration/groups-permissions'], { state: { isAdConfig: true } });
                
            } else {
                this.alerts.push(
                    {
                        msg: response.Details,
                        type: 'danger',
                        timeout: 3000
                    });
                }
        });
    }

父组件.ts

public AddUpdateConfigEvent(event: any) {
        this.alerts.push(
            {
                msg: 'Configuration added successfully!',
                type: 'success',
                timeout: 3000
            });
    }

它只是重定向路径（父组件页面）但没有显示任何警报。

如何在父页面上显示警报？

标签： javascriptangulartypescript