Angular 2 - @Input ne met pas à jour le modèle sur le super composant

Question

J'ai le scénario suivant :

Il y a des entités qui possèdent Pessoa l'un d'entre eux est Administrador C'est pourquoi j'ai décidé de créer un composant pour envelopper l'interface de l'utilisateur. Pessoa sur des formulaires CRUD. J'ai lié les administrador.pessoa à ma nouvelle PessoaFormComponent avec le @Input() directive.

Mon problème est que lorsque je soumets le AdministradorComponent le formulaire administrador.pessoa reste nulle, comme si les mises à jour sur pessoa propriété de PessoaFormComponent n'ont pas été répercutés dans AdministradorComponent .

adminrador.component.ts :

@Component({
...
templateUrl: './administrador.component.html',
directives: [... PessoaFormComponent, ...],
...
})
export class AdministradorComponent {
  @ViewChild('pessoaForm')
  pessoaFormComponent: PessoaFormComponent;
}

adminrador.component.html :

...
<app-pessoa-form #pessoaForm [(pessoa)]="entidade.pessoa"></app-pessoa-form>
...

pessoa.form.component.ts :

@Component({
...
selector: 'app-pessoa-form',
templateUrl: './pessoa.form.component.html',
...
})
export class PessoaFormComponent implements AfterViewInit {
  @Input()
  pessoa: Pessoa;

  private _tipoPessoa: String;

 ngAfterViewInit() {
   this._tipoPessoa= 'FISICA';
   this.reiniciarPessoa();
 }

 private reiniciarPessoa() {
   if (this._tipoPessoa === 'JURIDICA') {
     this.pessoa = new PessoaJuridica();;
   } else {
     this.pessoa = new PessoaFisica();;
   }
 }

 get tipoPessoa(): String {
   return this._tipoPessoa;
 }

 set tipoPessoa(tipoPessoa: String) {
   this._tipoPessoa = tipoPessoa;
   this.reiniciarPessoa();
 }
}

Answer 1

Pour [(pessoa)]="entidade.pessoa" pour que cette syntaxe fonctionne, il faut un @Input() y @Output() combinaison où le nom de la sortie est pessoaChange et les changements de valeur doivent être émis en utilisant this.pessoaChange.emit(newValue)

export class PessoaFormComponent implements AfterViewInit {
  @Input()
  pessoa: Pessoa;

  @Output()
  pessoaChange:EventEmitter<Pessoa> = new EventEmitter<Pessoa>();

  private reiniciarPessoa() {
    if (this._tipoPessoa === 'JURIDICA') {
      this.pessoa = new PessoaJuridica();
    } else {
      this.pessoa = new PessoaFisica();;
    }
    this.pessoaChange.emit(this.pessoa);
  }