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>

启动Planning组件时，show属性为null。 selectedPerson的更改始终传播到弹出组件，但对于showModal参数则不同。

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

子组件然后将其本地show属性设置为false。之后似乎＆＃34;输入连接丢失＆＃34; 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>

Angular2 boolean输入参数不起作用

1 个答案: