模態問題中的角度通信父/子

Question

我仍在學習組件如何在它們之間進行通信，所以我有我的 parentView，里面有一個帶有vmware-clarity組件的模式，但在我的工作中，他們告訴我將它移到一個單獨的組件中。

父視圖（之前）

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

我將其更改為：parentView：

<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>();

然后，通過使用一個裝在盒子里的香蕉自動將你的雙向綁定與你的父級關聯起來：

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

香蕉盒只是同時使用輸入和輸出的語法糖。 有關更多信息，請參閱官方指南： 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>

我希望您的模態視圖組件將真正充當實際模態打開狀態的傳遞。