Question

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

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

$mpdf = new \Mpdf\Mpdf([
  'margin_left' => '10mm',
  'margin_right' => '10mm',
  'margin_top' => '10mm',
  'margin_bottom' => '10mm',
]);

$html = '<style>
body {
    background-color: #4183c4;
    color:#ffffff;
    font-size:20px;
}
</style>
<div>Hello world!</div>';

$mpdf->SetHTMLHeader('<div style="text-align: right">My document</div>');
$mpdf->WriteHTML($html);

$mpdf->AddPage();
$mpdf->WriteHTML('Hi againg');

$mpdf->Output(__DIR__ . '/pdf.pdf');

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

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

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

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

 binaryOperators = ODataBinaryOperators;

 @ViewChild('left') leftExpression: OdataSimpleFilterComponent;

我如何才能使odataExpression: ODataExpressionDescriptor = new ODataExpressionDescriptor();始终等于观看孩子binaryExpression.left？

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的订阅）并可以做出相应的反应。

当然，有些细节可能会有所改变，因为我无法了解您实施的所有细节。

将ViewChild绑定到类中的属性

1 个答案: