Angular2布尔输入参数不起作用

Question

在我的 Planning 组件中，我有以下指令，其中 selectedPerson 是服务上的一个对象，而 showModal 是 Planning 组件中的本地布尔参数：

<person-popup [person]="planningService.selectedPerson" [show]="showModal"></person-popup>

PersonPopop 组件具有以下简单结构：

import { Component, Input } from '@angular/core';
import { Counselor } from '../entities/counselor';
import { Person } from '../entities/person';
import { Request } from '../entities/request';


@Component({
    selector: 'person-popup',
    templateUrl: './person-popup.component.html',
    styleUrls: ['./person-popup.component.css']
})


export class PersonPopupComponent {

    @Input() person: Person;
    @Input() show: boolean;

    constructor() { }

    public displayCss() {
        return this.show ? "displayBlock" : "";
    }

    public toggleShow() {
        this.show = !this.show;
        console.log("toggleShow: ", this.show)
    }
}

对应的 HTML 视图当前如下所示：

<p>{{show}}</p>
<p>{{person?.name}}</p>
<button (click)="toggleShow()">Show</button>

<div class="modal-background {{displayCss()}}" (click)="toggleShow()">
    <div class="modal-content animate">
        {{person?.name}}
    </div>
</div>

当规划组件启动时，显示属性为null。 selectedPerson 的更改始终会传播到弹出组件，但 showModal 参数并非如此。

当showModal 在父组件中首次设置为true 时，它在子组件中设置为true。

然后子组件会将其本地show 属性设置为false。 之后似乎“输入连接丢失”并且showModal 的所有后续更改都不会传播到show。

对如何重新设计有什么建议吗？

Answer 1

如果要将更改从子级传播到父级，则需要使用两种方式绑定：

export class PersonPopupComponent {

    @Input() person: Person;
    @Input() show: boolean;
    @Ouput() showChange= new EventEmitter<boolean>();

    constructor() { }

    public displayCss() {
        return this.show ? "displayBlock" : "";
    }

    public toggleShow() {
        this.show = !this.show;
        this.showChange.emit(this.show);
        console.log("toggleShow: ", this.show)
    }
}

然后在父级中：

<person-popup [person]="planningService.selectedPerson" [(show)]="showModal"></person-popup>