Angular 模态问题中的通信 Parent/Child

Question

我仍在学习组件如何在它们之间进行通信，所以我有我的 parentView，里面有一个包含 vmware-clarity 组件的模式，但在我的工作中，他们告诉我将它移动到一个单独的组件。

parentView（之前）

<button class="btn btn-cris" (click)="confirm=true">Create Project</button>
<clr-modal [(clrModalOpen)]="confirm">
    ///modal Content
</clr-modal>

我改成：父视图：

<button class="btn btn-cris" (click)="confirm=true">Create Project</button>
<app-myModal [confirm]="confirm"></app-myModal>

modalView.html:

<clr-modal [(clrModalOpen)]="confirm">
    ///modal Content
</clr-modal>

modalView.ts:

export class QSubInitialProcessComponent implements OnInit {
    @Input('confirm') confirm: boolean;

    constructor() { }

    ngOnInit() {
    }

}

但是现在当我用默认的 "x" 按钮关闭模式时，我无法重新打开它，当它只有一个组件时，你可以关闭它并打开它。

我猜这与亲子交流有关，但我不太确定。据我所知，默认情况下带有清晰度组件的 "x" 按钮会自动更改值

Answer 1

您肯定是在正确的轨道上。我认为您的问题出在这里：

<app-myModal [confirm]="confirm"></app-myModal>

这是从 parent 到新模态视图组件的 one-way 绑定。当您的 clr-modal 将模态视图的此标志更改为 false 时，您的 parent 可能仍然认为它 true.

您需要做的是将 two-way 绑定 引入到您的中间模态视图中。您可以通过简单地添加到模态视图来做到这一点：

@Input('confirm') confirm: boolean;
@Output() confirmChange = new EventEmitter<boolean>();

然后，使用 banana-in-a-box:

自动将您的 two-way 绑定与您的 parent 关联起来

<app-myModal [(confirm)]="confirm"></app-myModal>

banana-in-a-box 只是同时使用输入和输出的语法糖。有关详细信息，请参阅官方指南： https://angular.io/guide/template-syntax#basics-of-two-way-binding

如果以上方法不足以解决问题，也可能是您 two-way 与 clr-modal 输出中的 confirm 绑定。您可以尝试像这样拆箱关联：

<clr-modal [clrModalOpen]="confirm" (clrModalOpenChange)="confirmChange.emit($event)">
    ///modal Content
</clr-modal>

那时我希望您的模态视图组件真正充当实际模态打开状态的直通器。

Angular 模态问题中的通信 Parent/Child

Angular Communication Parent/Child in modals problem

modal-dialog

angular

vmware-clarity