@input雙向綁定不起作用

Question

我想訪問我的子組件中的文本區域中的文本，將其放在父組件上並保持更新。

有人告訴我，角度為4的@input應該執行雙向綁定。 但我不能這樣做，我不明白為什么。

我找到了解決此問題的方法。 它包含一個@Output，用於將信息發送到父組件。 但是如果Input已經這樣做了（以某種方式我不知道），我想避免它。

例如，這是我的父組件

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;
    }

}

這是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>

我的孩子成分：

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...

}

如果我更改文本區域中的值並使用@Output發送信號，以便可以通知我的父組件並且控制台記錄該值，則打印值是初始值。 我的朋友做了同樣的事情並且有效。

我錯過了什么？

Answer 1

@Input()始終是從parent->child綁定的一種方式。 在這種情況下，只有當您將object作為輸入屬性時才會發生雙向綁定。 這是因為，對象的引用保持不變。 當其中一個對象更新時，另一個也會更新。 string或number不是這樣。 它總是單向綁定。