component - ngfor angular 6

¿Cómo utilizar el enlace de datos bidireccional entre componentes en angular 2?

Question

Primero he creado una clase de User :

export class User {
  name: string;
  email: string;
}

Luego tengo mi CoreComponent que utiliza el FormInputComponent así como la creación de un public user de la clase User :

import {Component} from ''angular2/core'';
import {FormInputComponent} from ''../form-controls/form-input/form-input.component'';
import {User} from ''../core/user'';

@Component({
  selector: ''core-app'',
  templateUrl: ''./app/assets/scripts/modules/core/core.component.html'',
  styleUrls: [''./app/assets/scripts/modules/core/core.component.css''],
  directives: [FormInputComponent]
})

export class CoreComponent {
  public user: User = {
    name: '''',
    email: ''''
  }
}

Luego, he creado un componente de entrada, que es un componente de entrada reutilizable que tomará un valor de modelo como entrada y cuando se realicen cambios, exporte el nuevo valor para que CoreComponent pueda actualizar el modelo con el nuevo valor:

import {Component, Input, Output, EventEmitter, DoCheck} from ''angular2/core'';

@Component({
  selector: ''form-input'',
  templateUrl: ''./app/assets/scripts/modules/form-controls/form-input/form-input.component.html'',
  styleUrls: [''./app/assets/scripts/modules/form-controls/form-input/form-input.component.css''],
  inputs: [
    ''model'',
    ''type'',
    ''alt'',
    ''placeholder'',
    ''name'',
    ''label''
  ]
})

export class FormInputComponent implements DoCheck {
  @Input() model: string;
  @Output() modelExport: EventEmitter = new EventEmitter();

  ngDoCheck() {
    this.modelExport.next(this.model);
  }
}

La plantilla de FormInputComponent usa dos FormInputComponent y pasa user.name y user.email como la entrada para ellos:

<form-input [model]="user.name" type="text" name="test" placeholder="This is a test" alt="A test input" label="Name"></form-input>
<form-input [model]="user.email" type="email" name="test" placeholder="This is a test" alt="A test input" label="Email"></form-input>
<pre>{{user.name}}</pre>

La plantilla FormInputComponent :

<div>
  <label attr.for="{{name}}">{{label}}</label>
  <input [(ngModel)]="model" type="{{type}}" placeholder="{{placeholder}}" alt="{{alt}}" id="{{name}}">
</div>
<pre>{{model}}</pre>

Ahora el problema es que solo puedo ver los cambios desde el elemento pre que se encuentra dentro de la plantilla FormInputComponent , pero el elemento primario, el CoreComponent principal de CoreComponent permanece sin cambios.

Miré esta pregunta que está en el estadio de lo que quiero lograr, pero no del todo, ya que usar un servicio para devolver un valor a la jerarquía parece excesivo y un poco desordenado si tiene varios FormInputComponent en la misma página.

Entonces, mi pregunta es simple: ¿cómo puedo pasar un modelo a FormInputComponent y dejar que devuelva un nuevo valor cada vez que el valor cambie para que el public user en CoreComponent cambie automáticamente?

Answer 1

Como adición: el uso de ngDoCheck para emitir cambios en el modelo afectará RÁPIDAMENTE el rendimiento a medida que se emite el nuevo valor en cada ciclo de verificación, sin importar si se cambió o no. ¡Y eso es muy a menudo! (Prueba con console.log!)

Entonces, lo que me gusta hacer para obtener una comodidad comparable, pero sin los efectos secundarios, es algo como esto:

private currentSelectedItem: MachineItem;
@Output() selectedItemChange: EventEmitter<MachineItem> = new EventEmitter<MachineItem>();

@Input() set selectedItem(machineItem: MachineItem) {
    this.currentSelectedItem = machineItem;
    this.selectedItemChange.emit(machineItem); 
}

get selectedItem(): MachineItem {
    return this.currentSelectedItem; 
}

Y usalo como

<admin-item-list [(selectedItem)]="selectedItem"></admin-item-list>

También puede emitir el nuevo valor donde realmente se cambia. Pero me parece muy conveniente hacer eso de forma global con un método de establecimiento y no tengo que preocuparme cuando lo vinculo directamente desde mi punto de vista.

Answer 2

Esto fue demasiado largo para agregar como comentario a la respuesta de Thierry ...

Use emit() lugar de next() (que está en desuso), y solo llame a emit(newValue) cuando emit(newValue) el valor del model . Lo más probable es que desee algo como esto en su plantilla FormInputComponent:

<input [ngModel]="model" (ngModelChange)="onChanges($event)">

Luego en su lógica FormInputComponent:

onChanges(newValue) {
  this.model = newValue;
  this.changeModel.emit(newValue);
}

Answer 3

Para poder usar enlaces cortos de dos vías al usar su componente, necesita leer su propiedad de salida para modeChange:

export class FormInputComponent implements DoCheck {
  @Input() model: string;
  @Output() modelChange: EventEmitter = new EventEmitter();

  ngDoCheck() {
    this.modelChange.next(this.model);
  }
}

Y úsalo de esta manera:

<form-input [(model)]="user.name" type="text" name="test" placeholder="This is a test" alt="A test input" label="Name"></form-input>
<form-input [(model)]="user.email" type="email" name="test" placeholder="This is a test" alt="A test input" label="Email"></form-input>
<pre>{{user.name}}</pre>