Tengo una aplicación angular básica que se ve así:
app.component.html: <head> <title> My Home Page </title> </head> <body> <h1>Test Umgebung</h1> <div> <label>Firstname</label> <input placeholder="Firstname"/> </div> <div> <label>Lastname</label> <input placeholder="Lastname"/> </div> <div id="cloneContainer"> </div> <button (click)="cloneUpper()">+ Add more Users</button> </body> </html>Como puede ver, escribo Usuarios y cuando hago clic en el botón "Agregar más usuarios", se debe ejecutar el siguiente método:
app.component.ts: import { Component } from '@angular/core'; import { CloneComponentComponent } from './clone-component/clone-component.component'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent { title = 'UserManager'; cloneUpper(){ console.log("Cloned!"); var cln = new CloneComponentComponent(); var container = document.getElementById('cloneContainer'); container?.append(cln.toString()); } }El componente de clonación solo contiene una entrada para el nombre y el apellido para agregar más usuarios. Ahora, cuando hago clic en el botón, simplemente agrega [object Object] al "cloneContainer". ¿Cuál podría ser el error?
Primero sugiera relaciones, como relaciones padre-hijo, formas de obtener componentes secundarios a través de viewChild o parámetros públicos a través del servicio.
En Angular, no necesita obtener nada de DOM a través de getElementById . Simplemente agregue la representación condicional :
<div id="cloneContainer"> <!-- CloneComponentComponent selector --> <clone-component *ngIf="showClone"></clone-component> </div> Ahora su clon es visible solo cuando showClone = true , así que agreguemos esta variable a su AppComponent y cambiemos el método cloneUpper :
export class AppComponent { title = 'UserManager'; showClone = false; cloneUpper(){ this.showClone = true; } }En caso de que necesite manejar una matriz de componentes clild (presionar otros nuevos), puede hacer el mismo truco con la matriz:
<div id="cloneContainer"> <!-- CloneComponentComponent selector --> <clone-component *ngFor="let clone of clones"></clone-component> </div> export class AppComponent { title = 'UserManager'; clones = []; cloneUpper(){ this.clones.push(true); // whatever you want } }Está viendo esto de manera incorrecta, vaya a https://angular.io/tutorial para aprender los conceptos básicos de angular. Dicho esto, este es el caso de uso perfecto para un componente secundario. El componente secundario es un componente tonto en este caso, simplemente tomando un objeto. Creé una matriz de usuarios, pasé un usuario inicialmente y al hacer clic en el botón empujé a más usuarios a la matriz. El componente tonto solo muestra estos campos de formulario. ngModel para vincular los valores también. Aprenderá todo esto en el tutorial, pero para empezar... cree una interfaz:
export interface User { firstName: string; lastName: string; }Genial, ahora tenemos un modelo, ya que estamos usando TypeScript, ahora puede ayudarnos en el IDE si estamos haciendo algo tonto. A continuación, cree una matriz, inserte un objeto inicial en ella:
users = [{ firstName: '', lastName: ''}] as User[];Genial... ahora la función que se llamará cuando queramos agregar más usuarios:
addUser() { this.users.push({ firstName: '', lastName: ''}) } Y al niño, lo llamaremos DumbComponent . Declaramos @Input() para el niño, ya que le daremos el objeto de usuario:
@Input() user: User; Ok, y la plantilla secundaria solo tendrá dos campos, el nombre y el apellido, enlazados con ngModel :
<input [(ngModel)]="user.firstName" placeholder="First Name"/> <input [(ngModel)]="user.lastName" placeholder="Last Name"/> Luego, en padre, iteramos la matriz de users y mostramos un componente secundario que se alimenta al usuario actual en la iteración:
<dumb-component *ngFor="let user of users" [user]="user"></dumb-component>y el boton por supuesto:
<button (click)="addUser()">Add user</button>¡Eso es todo! Lea el tutorial vinculado en la parte superior, ¡aprenderá los conceptos básicos de angular allí mismo! :)