从onDeactivate访问p-inplace内容值

Question

我正在用p代替primeNg。我想在调用onDeactivate时使用pTemplate内容的值来调用一个函数。

代码片段：

<p-inplace [closable]="true" (onDeactivate)="doSomething(???)">
<ng-template pTemplate="display">
<label>xxx</label>
</ng-template>
<ng-template pTemplate="content">
<input type="text" #myInput pInputText [ngModel]="someReadonlyInitialData">
</ng-template>
</p-inpace>

我想将键入的值发送到myInput中的？？？是如果它不在模板中，我可以通过doSomething(myInput.value)发送，但由于它在模板内，所以在那里无法识别。

有人对此有解决方案或变通办法吗？

Answer 1

很遗憾，您不能使用模板变量引用，因为您已经知道了。

我的解决方案是将更改保存在模板中的其他变量中，以便在需要时使用它，并将模板函数doSomething()中的参数留空。

<p-inplace [closable]="true" (onDeactivate)="doSomething()">
<ng-template pTemplate="display">
<label>xxx</label>
</ng-template>
<ng-template pTemplate="content">
<input type="text" #myInput pInputText [ngModel]="someReadonlyInitialData" (ngModelChange)="someData = $event">
</ng-template>
</p-inpace> 

在您的ts文件中：

someData: string;
doSomething() {
/* now your value is inside this.someData /*
}

PS：我想你不想使用双向绑定，如果你不介意，你不需要创建第二个变量。你可以：

[(ngModel)]="someData" 

Answer 2

除了StPaulis的答案之外，如果在表单标记中使用ngModel，请不要忘记添加name属性。所以输入看起来是这样的：

<input type="text" pInputText [(ngModel)]="someData" name="someData">