Question

我有以下情况：

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

我的问题是，当我提交AdministradorComponent表单时，administrador.pessoa属性仍然为空，就像pessoa PessoaFormComponent属性上的更新未反映到AdministradorComponent {1}}。

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，并且需要使用{{1}发出值更改}

this.pessoaChange.emit(newValue)

Angular 2 - @Input不更新超级组件上的模型

1 个答案: