Angular

Question

我有以下 angular 个组件：

ComponentB 有输入属性，componentA 在模板文件中插入 componentB。代码如下所示：

componentA.ts:

export class ComponentA{
    isOpen: boolean;

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

componentA.html:

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

ComponentB.ts:

@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 属性似乎没有反映 open 属性的当前值，尽管指定了双向绑定。

为什么会这样？如何解决？

Answer 1

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

你能试试这个吗？

顺便说一下@Input() 打开：布尔值 = false；是一个 lint 错误。当您将 = false 分配给值时，它的类型将自动分配为布尔值，您不必指定它

Answer 2

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

For this purpose special syntax (Banana in a box) "[()]" is used. Please find the official angular documentation about this 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 link.

Angular - 两种方式将输入属性绑定到具有 getters / setters 的组件

Angular - Two way binding input property to component with getters / setters

getter-setter

property-binding

Angular - 两种方式将输入 属性 绑定到具有 getters / setters 的组件

Angular - Two way binding input property to component with getters / setters

getter-setter

property-binding

angular

Angular - 两种方式将输入属性绑定到具有 getters / setters 的组件