Angular Общение Родитель / Ребенок в модальной задаче - PullRequest
Новая
       23

Angular Общение Родитель / Ребенок в модальной задаче

0 голосов
/ 04 марта 2020

Я все еще изучаю, как компоненты взаимодействуют между ними, поэтому у меня есть мой parentView, внутри которого был модал с компонентами vmware-clarity , но в моей работе они сказали мне двигаться это отдельный компонент.

parentView (До) 

<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", которая поставляется по умолчанию с компонентом ясности, автоматически меняет значение

1 Ответ

1 голос
/ 04 марта 2020

Вы, конечно, на правильном пути здесь. Я полагаю, что ваша проблема заключается здесь: 

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

Банан в коробке - это просто синтактический c сахар для одновременного использования ваших входов и выходов. Для получения дополнительной информации см. Официальное руководство: https://angular.io/guide/template-syntax#basics -of-двухстороннего связывания

Если вышеуказанного недостаточно для решения проблемы, возможно, вы re-way-bound с confirm из вывода clr-modal. Вы можете попробовать распаковать ассоциацию следующим образом: 

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

Тогда я ожидал бы, что ваш компонент модального представления действительно будет действовать как проходной путь для фактического открытого состояния модала.

...