J'essaye d'utiliser [(ngModel)] dans mon composant enfant avec une chaîne passée de mon parent à mon composant enfant via @Input ().

Cependant, la liaison bidirectionnelle ne semble pas fonctionner. La chaîne est correctement transmise par le parent, mais lorsque je la modifie dans l'enfant, la valeur du parent n'est pas mise à jour.

Qu'est-ce que je rate?

Parente:

@Component({
  selector: 'my-app',
  template: `
    <div>
      <child [(value)]="name"></child>
      <p>{{name}}</p>
    </div>
  `,
})
export class App {
  name:string = 'MyValue';
  constructor() {

  }
}

Enfant

import {Component, Input} from '@angular/core'

@Component({
  selector: 'child',
  template: `
    <div>
    <p>My custom input</p>
      <textarea [(ngModel)]="value"></textarea>
    </div>
  `,
})
export class Child {


  @Input() value:string;

  constructor() {

  }
}

J'ai créé un plnkr qui illustre le problème: https://plnkr.co/edit/jCF5kt73P38EFYUAZF6l

5
Korgen 21 avril 2017 à 15:23

3 réponses

Meilleure réponse

Vous avez besoin d'une sortie pour notifier les modifications:

import {Component, Input} from '@angular/core'

@Component({
  selector: 'child',
  template: `
    <div>
    <p>My custom input</p>
      <textarea [(ngModel)]="value" (ngModelChange)="update($event)"></textarea>
    </div>
  `,
})
export class Child {


  @Input() value:string;
  @Output() valueChange:EventEmitter<string> = new EventEmitter<String>()

  update(value) {
    this.valueChange.emit(value);
  }

  constructor() {

  }
}
6
Günter Zöchbauer 21 avril 2017 à 12:26

Dans le prolongement de la réponse de @ Günter Zöchbauer, j'ai également modifié le fichier app.ts.

App.ts:

//our root app component
import {Component, NgModule, VERSION} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import {Child} from './child'
import {FormsModule} from "@angular/forms";

@Component({
  selector: 'my-app',
  template: `
    <div>
      <child [value]="name" (valueChange)= "updateValue($event)"></child>
      <p>{{name}}</p>
    </div>
  `,
})
export class App {
  name:string = 'MyValue';
  constructor() {

  }
   updateValue(value){
      this.name = value;
    }
}

@NgModule({
  imports: [ BrowserModule, FormsModule ],
  declarations: [ App, Child ],
  bootstrap: [ App ]
})
export class AppModule {}

Enfant

import {Component, Input, Output, EventEmitter} from '@angular/core'

@Component({
  selector: 'child',
  template: `
    <div>
    <p>My custom input</p>
      <textarea [(ngModel)]="value" (ngModelChange)="update($event)"></textarea>
    </div>
  `,
})
export class Child {


  @Input() value:string;
 @Output() valueChange:EventEmitter<string> = new EventEmitter<String>();

  constructor() {

  }

  update(value) {
    this.valueChange.emit(value);
  }
}
0
Amit Chigadani 21 avril 2017 à 12:48

Ouais - @Input ne fonctionne que dans un sens. Lorsque le parent modifie la valeur de Input, l'enfant est averti. Cependant, le parent n'est pas au courant des modifications apportées à l'enfant, si vous utilisez uniquement @Input.

1
Aardvark 21 avril 2017 à 12:46