角度将ViewChild绑定到类中的属性

Question

我试图弄清楚如何将视图子项绑定到视图内部的类的子项组件。

我有一个模拟二进制表达式的模型：

export interface IODataExpression{

}

export class ODataExpressionDescriptor implements IODataExpression{
    property: ODataProperty;
    selectedFunction: ODataFunctionDescriptor;
    value: any;
    isNegated: boolean = false;
}

export class ODataBinaryExpressionDescriptor implements IODataExpression{
    left: IODataExpression;
    right: IODataExpression;
    operator: ODataBinaryOperators;
}

我有一个看起来像这样的组件类：

 binaryExpression: ODataBinaryExpressionDescriptor = new ODataBinaryExpressionDescriptor();
 binaryOperatorKeys: any;

 binaryOperators = ODataBinaryOperators;

 @ViewChild('left') leftExpression: OdataSimpleFilterComponent;

left属性指向内部具有属性的组件：

odataExpression: ODataExpressionDescriptor = new ODataExpressionDescriptor();

我怎样才能使binaryExpression.left始终等于子视图leftExpression.odataExpression的视图？

Answer 1

使用一个EventEmitter 。

在OdataSimpleFilterComponent

@Output() odataExpressionChange = new EventEmitter<ODataExpressionDescriptor>();

然后，只要组件内部的值发生变化，您就可以执行以下操作：

this.odataExpressionChange.emit(this.odataExpression);

在主要组件中，您必须在ngAfterViewInit （或ngAfterViewChecked ）中进行操作，以确保leftExpression已初始化：

ngAfterViewInit() {
    leftExpression.odataExpressionChange.subscribe(data => {
        this.binaryExpression.left = data;
    }
}

这样，无论EventEmitter组件中的值发生变化，您都会收到一条通知（通过对EventEmitter ），并且可以做出相应的反应。

当然，某些细节可能会更改，因为我不知道您实现的所有细节。