角度2 - スーパーコンポーネントでモデルを更新しない@Input

Question

私は次のシナリオを持っている：

ありPessoaは、これらのいずれかがAdministradorで所有し、いくつかのエンティティがあるので、私はPessoaデータをラップするためのコンポーネントを作成することにしましたCRUDフォームに@Input()ディレクティブを使用して、PessoaFormComponentの新しいプロパティにadministrador.pessoaプロパティをバインドしました。

私の問題は、私はAdministradorComponentフォームを送信する際PessoaFormComponentのpessoaプロパティの更新がAdministradorComponentに反映されなかった場合のように、administrador.pessoaプロパティは、nullのままであることです。

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：[(pessoa)]="entidade.pessoa"この構文のために

@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

あなたは@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); 
    }