Angular2布尔输入参数不起作用

Posted 2023-02-23

【中文标题】Angular2布尔输入参数不起作用

【英文标题】：Angular2 boolean Input parameter not working

【发布时间】：2017-08-25 18:50:57

【问题描述】：

在我的 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。

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

【问题讨论】：

Update parent component property from child component in Angular 2的可能重复

【参考方案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>

【讨论】：

感谢您的快速回答！一些后续问题以确保我理解：1）你的意思是我需要做的就是在指令绑定中添加括号，并在发射器中添加相应的输出参数？ 2) showChange 是一种命名约定，会自动匹配双向绑定吗？ 3）发出一个值并设置本地参数会不会令人困惑？仅仅调用 this.showChange.emit(!this.show) 并让它将更改传播到 Input 参数还不够吗？

1.是的。 2. Change 后缀是使用[(bananaInABox)] 表示法，但你可以将它命名为showFoo，例如，使用[show]="someData" (showFoo)="doSomething($event)" 注意你可以对(showChange)="doSomething($event)" 做同样的事情，盒子里的香蕉不是强制 3. 是的，我想这是可能的。

对于未来的读者，我只是添加对另一篇文章的引用，其中使用 get/set 方法执行双向绑定。这使得它更加冗长，但它可能对一些更复杂的情况有用。 ***.com/a/39943368/1122813

@JakobLithner 想想你的最后一个“3”。观点。这可能有效，但前提是您仅依靠 @Input() 来获取该属性的值。如果你这样做，双向绑定就成为强制性的。