2016-05-06 2 views
2

У меня есть следующий сценарий:Угловое 2 - не @Input обновления модели на супер компонент

Есть некоторые лица, которые владеют Pessoa, один из них Administrador, поэтому я решил создать компонент, чтобы обернуть данные Pessoa на формах CRUD. Я связал имущество administrador.pessoa с моим новым PessoaFormComponent с директивой @Input().

Моя проблема заключается в том, что, когда я представляю AdministradorComponent форму, то administrador.pessoa свойство остается пустым, как если обновления на pessoa свойства PessoaFormComponent не были отражены в 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(); 
} 
} 

ответ

3

Для [(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); 
    } 
+0

Спасибо, что работает –

Смежные вопросы