模态问题中的角通信父/子

Question

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

父视图（之前）

<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>

这是从您的父级到您的新模态视图组件的单向绑定。当您的 clr-modal 将此标志更改为 false 以用于您的模态视图时，您的父母可能仍然认为它是 true。

您需要做的是向中间模态视图引入双向绑定。您可以通过对模态视图的简单添加来做到这一点：

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

然后，使用 banana-in-a-box 自动将您的双向绑定与您的父级关联：

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

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

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

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

我希望您的模态视图组件将真正充当实际模态打开状态的传递。