Angular 2 ngModel no componente filho atualiza a propriedade do componente pai
Eu fiz uma interface simples que consiste em dois componentes (pai e filho).
O que a interface do usuário faz é que, quando digito algumas coisas na caixa de entrada do componente Filho. O valor será alterado usando ngModel.
O componente filho funciona bem dessa maneira.
// Child Component
@Component({
selector: 'child',
template: `
<p>{{sharedVar}}</p>
<input [(ngModel)]="sharedVar">
`
})
export class ChildComponent {
sharedVar: string;
}
Agora eu tenho um componente pai que pretendo usar o mesmo valor que o Componente Filho.
Adicionei o componente filho ao modelo pai e use a injeção de dependência para chamar o componente filhosharedVar
.
// Parent Component
@Component({
selector: 'parent',
template: `
<h1>{{sharedVar}}</h1>
<child></child>
`,
directives: [ChildComponent],
providers: [ChildCompnent]
})
export class ParentComponent {
sharedVar: string;
constructor(child: ChildComponent) {
this.sharedVar = child.sharedVar;
}
}
O problema é que, enquanto digito na caixa de entrada, o valor em<p>
muda automaticamente enquanto o valor no componente pai<h1>
não mude.