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

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

expression tree typescript angular javascript

johnny 5 · 技术社区 · 8 年前

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

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

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

Oscar Paz 8 年前

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

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

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

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

1 年前

Alex · 在轻量级中同时解构和不解构变量

1 年前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

bairog · 从按属性筛选的对象数组字典中创建值数组

1 年前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

1 年前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

user3472810 · Angular@Output/EventEmitter返回undefined

1 年前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

1 年前