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

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

expression tree typescript angular javascript

johnny 5 · 技术社区 · 6 年前

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

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

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 回复 | 直到 6 年前

Oscar Paz 6 年前

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

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

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

推荐文章

Daniel_H · Haskell和gate不使用==或/=

6 年前

MikoÅaj WaÅniewski · Regex-如何匹配子组[重复]

6 年前

Marcel · 在render()中使用args调用函数表达式-react native

6 年前

kl-higgins · 在文本中使用上标并在R中粘贴(用于多个值的向量)

6 年前

RogerHN · Javascript正则表达式只检查字符串开头的数字和减号

6 年前

JohntyWeaver · 使用正则表达式从文件名获取文件id

6 年前

Rafaël De Jongh · Reg表达式:带空格的GB Vat编号

6 年前

S_D · 表达式和参数的执行顺序如何?[已关闭]

6 年前

presence · (~ INT\u MAX&&INT\u MAX)返回1?

6 年前

Stephanie · 如何将SQL表中的数据导出到SSIS中的多个excel文件?

6 年前