代码之家 › 专栏 › 技术社区 › johnny 5

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

expression tree typescript angular javascript

0

johnny 5 · 技术社区 · 7 年前

我试图找出如何将视图子级绑定到视图中类的子组件。

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

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 始终等于视图childs leftExpression.odataExpression ?

1 回复 | 直到 7 年前

1

Oscar Paz 7 年前

使用 EventEmitter 。

在里面 OdataSimpleFilterComponent

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

然后,只要组件中的tha值在内部发生变化,您就会执行以下操作:

this.odataExpressionChange.emit(this.odataExpression);

在主组件中,您必须在 ngAfterViewInit (或 ngAfterViewChecked ),以确保 leftExpression 已初始化:

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

这样,每当子组件中的值发生更改时,您都会收到一个通知(通过对 事件发射器 )并能做出相应的反应。

当然,一些细节可能会发生变化,因为我无法知道您实现的所有细节。