[英]How to change html input value inside a grandchild component from grandparent component
I have a WidgetsModule where I've created an input component我有一个 WidgetsModule,我在其中创建了一个输入组件
input.component.ts输入.component.ts
import { AfterViewInit, Component, Input, OnInit, Output, ViewChild } from '@angular/core';
@Component({
selector: 'app-input',
templateUrl: './input.component.html',
styleUrls: ['./input.component.css']
})
export class InputComponent implements OnInit, AfterViewInit {
@Input() Nombre:string = '';
@Input() Placeholder:string = '';
@Input() Value:string = '';
constructor() { }
ngOnInit(): void { }
ngAfterViewInit(): void { this.bindFocusAnimation(); }
onInput(evt:Event):void{ this.Value = (<HTMLInputElement>evt.target).value; }
bindFocusAnimation():void{
var materialInput:HTMLInputElement = <HTMLInputElement>document.getElementById(this.Nombre);
if(materialInput.value && materialInput.value.trim().length > 0)
materialInput.parentElement.lastElementChild.setAttribute("class", "label-material active");
// move label on focus
materialInput.addEventListener("focus", function () {
materialInput.parentElement.lastElementChild.setAttribute("class", "label-material active");
});
// remove/keep label on blur
materialInput.addEventListener("blur", function () {
var css = "label-material";
if(materialInput.value !== undefined && materialInput.value.trim().length > 0)
css += " active";
materialInput.parentElement.lastElementChild.setAttribute("class", css);
});
}
}
input.component.html输入.component.html
<div class="input-material-group mb-3">
<input class="input-material" id="{{Nombre}}" type="text" name="{{Nombre}}" value="{{Value}}" (input)="onInput($event)" autocomplete="off">
<label class="label-material" for="{{Nombre}}">{{Placeholder}}</label>
</div>
outside the component, I can change the Value's value, but this value is not rendered inside html input.在组件外部,我可以更改值的值,但该值不会在 html 输入内部呈现。 Givin an example, I have a clearFields();
举个例子,我有一个clearFields();
function where I make input.Value = '0'
, making a console.log()
of the component, shows me that the value was correctly changed, but when looking at the html the value is still there function 我在其中设置了input.Value = '0'
,创建了组件的console.log()
,显示该值已正确更改,但在查看 html 时该值仍然存在
this is the page's code where I render the input component这是我呈现输入组件的页面代码
tipo-componente.component.ts tipo-componente.component.ts
import { Component, OnInit, ViewChild } from '@angular/core';
import { Constantes } from 'src/app/constantes';
import { ApiRequest } from 'src/app/interface/api-request.interface';
import { TipoComponente } from 'src/app/interface/tipo-componente.interface';
import { TipoComponenteService } from 'src/app/services/tipo-componente.service';
import { WidgetsModule } from 'src/app/widgets/widgets.module';
@Component({
selector: 'app-tipo-componente',
templateUrl: './tipo-componente.component.html',
styleUrls: ['./tipo-componente.component.css']
})
export class TipoComponenteComponent implements OnInit {
tiposComponentes:TipoComponente[];
id:number;
tipo:string;
icono:string;
constructor(private TipoComponenteSvc:TipoComponenteService) { }
ngOnInit(): void {
}
ngAfterViewInit() {
this.cargarTiposComponentes();
this.limpiarCampos();
}
cargarTiposComponentes():void{
const req:ApiRequest = {
Usuario:Constantes.usuario.Usuario,
Contrasenia:Constantes.usuario.Contrasenia,
Key:Constantes.usuario.Key,
RequestObject:{ Id:0, Descrip:'' }
};
// this.TipoComponenteSvc.cargar(req).pipe(
// tap(
// res => {
// if(res.Status){
// this.tiposComponentes = <TipoComponente[]>res.Data;
// }
// else
// console.log(res.Mensaje);
// }
// )
// ).subscribe();
}
limpiarCampos():void{
this.id = 0;
this.tipo = '0';
this.icono = '';
}
btnNuevo_Click():void{
this.limpiarCampos();
WidgetsModule.showPanel('pnlTipoComponente');
}
btnGuardar_Click():void{
WidgetsModule.hidePanel('pnlTipoComponente');
this.limpiarCampos();
}
btnEditar_Click(element:TipoComponente):void{
WidgetsModule.showPanel('pnlTipoComponente');
}
btnEliminar_Click(element:TipoComponente):void{
WidgetsModule.hidePanel('pnlTipoComponente');
this.cargarTiposComponentes();
}
}
tipo-componente.component.html tipo-componente.component.html
<section>
<div class="container-fluid">
<div class="row gy-4">
<div class="col-12">
<div class="card mb-0">
<div class="card-header">
<h3 class="h4 mb-0 title">Compact Table</h3>
<div class="w-auto tool-box">
<a class="tool-button new-button" id="btnNuevo" (click)="btnNuevo_Click()">
<svg class="svg-icon svg-icon-sm svg-icon-heavy">
<use xlink:href="#add-1"></use>
</svg> Nuevo
</a>
</div>
</div>
<div class="card-body pt-0">
<div class="row new-element-panel" id="pnlTipoComponente" style="display:none">
<input type="hidden" id="hfId" [value]="id"/>
<div class="col-3">
<app-input Nombre="inTipo" [Value]="tipo" Placeholder="Tipo de Componente"></app-input>
</div>
<div class="col-3">
<app-input Nombre="inIcono" [Value]="icono" Placeholder="Ícono"></app-input>
</div>
<div class="">
<a class="tool-button save-button" id="btnGuardar" (click)="btnGuardar_Click()">
<svg class="svg-icon svg-icon-sm svg-icon-heavy">
<use xlink:href="#add-1"></use>
</svg> Guardar
</a>
</div>
</div>
<div class="table-responsive">
<table class="table mb-0 table-striped table-sm">
<thead>
<tr>
<th>#</th>
<th>Descripción</th>
<th>Ícono</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let tipo of this.tiposComponentes; let index = index">
<th>{{ tipo.Id }}</th>
<td>{{ tipo.Descrip }}</td>
<td>{{ tipo.Icono }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
I'v tried using @ViewChild annotations, EventEmitters, and I can't really remember what else (again stuck with this since the last week xD).我试过使用 @ViewChild 注释、EventEmitter,但我真的记不起还有什么(自上周 xD 以来再次坚持使用它)。 I look forward for your answers and thanks in advance我期待着您的回答并提前致谢
From what I have tested, the problem is that Angular does not bind the variable in the "tipo-componente" component to the variable in the "input" component.根据我的测试,问题是 Angular 没有将“tipo-componente”组件中的变量绑定到“input”组件中的变量。
I think the best option you have is using eventEmitter.我认为您拥有的最佳选择是使用 eventEmitter。 EventEmitter allows your component to send events. EventEmitter 允许您的组件发送事件。 For example:例如:
In your input.component.ts file:在你的 input.component.ts 文件中:
@Output() setInput = new EventEmitter<string>();
onInput(evt:Event) : void {
this.Value = (<HTMLInputElement>evt.target).value;
console.log(this.Value)
this.setInput.emit(this.Value);
}
This will make your input component send a "setInput" event each time you change the input.这将使您的输入组件在您每次更改输入时发送一个“setInput”事件。
In your tipo-componente.component.html:在你的 tipo-componente.component.html 中:
<app-input Nombre="inTipo" [Value]="tipo" Placeholder="Tipo de Componente" (setInput)="receiveInput($event)"></app-input>
This will make your app listen to the "setInput" event from app-input and call the receiveInput() method.这将使您的应用程序侦听来自应用程序输入的“setInput”事件并调用 receiveInput() 方法。
In your tipo-componente.component.ts:在你的 tipo-componente.component.ts 中:
receivedInput(event : string){
this.tipo = event;
}
This will make your app change the value of the variable "tipo" in the "tipo-componente" component.这将使您的应用更改“tipo-componente”组件中变量“tipo”的值。
Fell free to ask for clarification if needed!如果需要,请随意要求澄清!
EDIT编辑
Please note that the EventEmitter class is the one from @angular/core请注意 EventEmitter class 来自@angular/core
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.