Question

/** parent componet */
const modalRef = this.dialogService.addDialog(StaticRoutesModalComponent, {data});
modelRef.________.subscribe((result)=>{
    if(result === 'updateTable') {
        this.getAndUpdateTableData();
    }
});

/** modal component */
export class ModalComponent extends DialogComponent<DataModel, boolean> implements OnInit {
    @Output() notifyParent: EventEmitter<string> = new EventEmitter();

    onEmit() {
        this.notifyParent.emit('updateTable');
    }
}

需要在不关闭模式的情况下从模式向其父组件发出事件。

Answer 1

将您的事件移动到某个服务中，将服务注入两个组件中，第一个订阅它，第二个-发出它。

Answer 2

将功能作为组件的属性传递。

检查以下演示代码：

// parent.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
    selector: 'app-parent',
    templateUrl: './parent.component.html',
    styleUrls: ['./parent.component.scss']
})
export class ParentComponent implements OnInit {
    constructor() {}
    emittedFn() {
        // your logic here
    }
}
// parent.component.html
<app-modal [fn]="emittedFn"></app-modal>

// modal.component.ts
import { Component, OnInit, Input } from '@angular/core';
@Input() fn: any;
@Component({
    selector: 'app-modal',
    templateUrl: './modal.component.html',
    styleUrls: ['./modal.component.scss']
})
export class ModalComponent implements OnInit {
  constructor() {}
}
// modal.component.html
<div>
    <button (click)="fn()">emit parent</button>
</div>

Answer 3

我一直在使用ng-bootstrap的NgbModal类进行处理，并使用import LODASH from 'lodash' if (process.env.NODE_ENV !== 'production') console.log(LODASH)关键字和this属性将父组件传递给模式。

NgbModal.componentInstance

如何将事件从模式传递到其父组件

3 个答案: