angularjs - Angular 2 - @Input 不更新 super 组件上的模型

Question

我有以下场景:

有一些实体拥有 Pessoa，其中之一是 Administrador，所以我决定创建一个组件来包装 Pessoa 数据在 CRUD 表格上。我使用 @Input() 指令将 administrador.pessoa 属性绑定(bind)到我的新 PessoaFormComponent。

我的问题是，当我提交 AdministradorComponent 表单时，administrador.pessoa 属性保持为空，就像 pessoa 属性的更新一样PessoaFormComponent 未反射(reflect)到 AdministradorComponent 中。

administrador.component.ts:

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

administrador.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

要使 [(pessoa)]="entidade.pessoa" 工作，您需要一个 @Input() 和 @Output() 组合，其中输出名称为 pessoaChange 并且需要使用 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);
  }