我有一個 WidgetsModule 我在其中創建了一個輸入組件
輸入組件.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
<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>
在組件之外，我可以更改 Value 的值，但該值不會在 html 輸入中呈現。舉個例子，我有一個clearFields();函式，我input.Value = '0'制作了一個console.log()組件，向我展示了該值已正確更改，但是在查看 html 時該值仍然存在
這是我呈現輸入組件的頁面代碼
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
<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>
我嘗試過使用@ViewChild 注釋、EventEmitters，但我真的不記得還有什么（自上周xD 以來再次堅持這一點）。我期待您的回答，并提前致謝
uj5u.com熱心網友回復：
根據我的測驗，問題在于 Angular 沒有將“tipo-componente”組件中的變數系結到“input”組件中的變數。
我認為您擁有的最佳選擇是使用 eventEmitter。EventEmitter 允許您的組件發送事件。例如：
在您的 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);
}
這將使您的輸入組件在您每次更改輸入時發送一個“setInput”事件。
在您的tipo-componente.component.html 中：
<app-input Nombre="inTipo" [Value]="tipo" Placeholder="Tipo de Componente" (setInput)="receiveInput($event)"></app-input>
這將使您的應用程式監聽來自 app-input 的“setInput”事件并呼叫 receiveInput() 方法。
在您的tipo-componente.component.ts 中：
receivedInput(event : string){
this.tipo = event;
}
這將使您的應用程式更改“tipo-componente”組件中變數“tipo”的值。
如果需要，請隨時要求澄清！
編輯
請注意，EventEmitter 類是來自 @angular/core 的類
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/468669.html
上一篇：使用包含的聯合型別錯誤陣列