Angular-使用getters / setter方法将输入属性绑定到组件的两种方式

问题描述

我有以下角度分量：

具有输入属性的

ComponentB和在模板文件中插入componentA的{​​{1}}。 该代码如下所示：

componentA.ts：

componentB

componentA.html：

export class ComponentA{
    isOpen: boolean;

    methodA() {
        this.isOpen = false;
        // do some work
    }
}

ComponentB.ts：

<componentB [(open)]="isOpen"></componentB >

问题是，尽管指定了双向绑定，但是@Component({ selector: 'componentB',templateUrl: 'ComponentB .html',encapsulation: ViewEncapsulation.None,}) export class ComponentB { private _open: boolean = false; @Input('open') set open(value: boolean) { if (open === this._open) { return; } if (open) { // doSomething() } else { // doSomethingElse() } this._open = open; } get open() { return this._open; } } 属性似乎不能反映isOpen属性的当前值。

为什么会发生？ 怎么解决？

解决方法

双向绑定是angular提供的一种特殊语法，它可以同时设置组件的值和监听值的变化。

为此，使用了特殊语法（在框内的香蕉）“ [（）] ”。请找到有关此here的正式角度文档。

简而言之，您将必须提供一个带有 @Input（）装饰器的属性，以及一个带有 @Output（）装饰器的属性。 @Output（）属性将在其后附加单词 Change 。因此，如果@Input属性名称为 x ，则输出属性名称应为 xChange 。只要更改了底层绑定属性，就使用输出属性的 EventEmitter ，让父组件侦听更改（因此实现了双向绑定）。

对于您而言，您的代码将像这样更新

  @Input('open') set open(value: boolean) {
        if (value === this._open) {
            return;
        }
        if (open) {
            // doSomething()
        } else {
            // doSomethingElse()
        }
        this._open = value;
        this.openChange.emit(this._open); //open value set,the updated value is emitted using the output property.
    }
    get open() {
        return this._open;
    }
      @Output('openChange')  //the output property added
      openChange = new EventEmitter<boolean>();

请找到Stack Blitz链接。

,

private _open= false;

@Input('open') set open(value: boolean) {
    if (value=== this._open) {
        return;
    }
    if (value) {
        // doSomething()
    } else {
        // doSomethingElse()
    }
    this._open = value;
}

get open() {
    return this._open;
}

你可以试试吗？

btw @Input（）open：布尔=假;是一个小毛病。当您将=赋值为false时，它的类型将自动分配为布尔值，而无需指定