javascript - @input toveis binding fungerer ikke

Jeg vil få tilgang til teksten jeg har i et tekstområde i barnekomponenten min for å legge den på foreldrekomponenten og holde den oppdatert.

Jeg ble fortalt at @input i Angular 4 skal utføre toveis binding. Men jeg kan ikke gjøre det på den måten, og jeg forstår ikke hvorfor.

Jeg fant en løsning for dette problemet. Den inkluderer en @Output for å sende informasjonen til overordnet komponent. Men hvis Input allerede gjør det (på en måte jeg ikke vet), vil jeg unngå det.

For eksempel, dette er min overordnede komponent

import { Component } from '@angular/core';

@Component({
    selector: 'app-settings',
    templateUrl: './settings.component.html',
})
export class SettingsComponent {

    private studyDesignText =  'Text';

    constructor() {
    }

    public handleStudyDesignUpdated(designText: any) {
        this.studyDesignText = designText;
    }

}

Det er html

<div class="section section-trials-settings-parent light rounded">
  <div class="section section-trials-settings-child">
    <div class="pure-g">
      <div class="pure-u-1-1">
        <app-settings-study-design
          [studyDesignText]="studyDesignText">
        </app-settings-study-design>
      </div>
    </div>
  </div>
</div>

Mitt barnekomponent:

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

@Component({
  selector: 'app-settings-study-design',
  templateUrl: './settings-study-design.component.html',
})
export class SettingsStudyDesignComponent implements OnInit {

  @Input() studyDesignText: string;

  constructor() {
  }

  ngOnInit() {
    super.onInit();
    loadControls();
  }

  loadControls(): void {
    this.startAllTextAreas();
  }

  private startAllTextAreas() {
    this.startTextArea('study-design-textarea');
  }

  private startTextArea(htmlId: string) {
    // code to configure my text area; it's right...

}

Hvis jeg endrer verdien i tekstområdet og sender et signal med @Output slik at komponenten over kan bli varslet og logge verdien i konsollen, er verdien som skrives ut den opprinnelige. Vennen min gjorde det samme, og det fungerte.

Hva går jeg glipp av?

Svar #1

@Input() er alltid envegsbinding fra parent->child. To-veis binding skjer i dette tilfellet, bare når du har object som en input-egenskap. Dette er fordi referansen for objekter forblir den samme. Og når ett av objektene oppdateres, vil det andre også bli oppdatert. Dette gjelder ikke for string eller number. Det er alltid envegsbinding.

Relaterte artikler