代码之家 › 专栏 › 技术社区 › 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;
    }
}

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

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

推荐文章

root · 计数算法

1 年前

Ash · 递归列表拆分和索引

2 年前

Someone · 如何实际删除节点?

2 年前

bb ef · 如何使用递归从列表中删除某些内容?python

6 年前

Linkmaster · 在用于BST的类中是否可能有类成员变量BST?

6 年前

Adam Morad · 方案更改树值

6 年前

A Akshat · 如何为函数中的结构分配动态内存插槽,该结构可以从程序中的任何位置访问

6 年前

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

6 年前

user2467011 · 为什么给定的二叉树是用空节点构造的?

6 年前

Yuki.kuroshita · 从二叉树中删除节点及其所有子节点,而不使用树数据结构

6 年前