@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。它始终是单向绑定。