带有@input属性的Angular 7 2路绑定答案

【问题标题】：Angular 7 2-way binding with @input attribute带有@input属性的Angular 7 2路绑定
【发布时间】：2019-03-21 18:43:25
【问题描述】：

我有一个子组件，它使用@Input 指令从父组件获取属性值。问题是双向数据绑定似乎不适用于此输入属性。知道这可能是什么原因吗？

子组件类

@Component({
  selector: 'app-edit-property',
  templateUrl: './edit-property.component.html',
  styleUrls: ['./edit-property.component.css']
})
export class EditPropertyComponent implements OnInit {

  @Input() property: any;

  constructor(
    private propertiesService: PropertiesService
  ) { }

  ngOnInit() {
  }

}

模板

<input type="text" class="form-control" required name="title" [(ngModel)]="property.title" #title="ngModel">

父组件

<app-edit-property [property]='property'></app-edit-property>

【问题讨论】：

可以分享一下代码吗？
Angular 中没有真正的双向绑定。这是 Angular.js 的缺陷之一。结合属性绑定和事件绑定有一种语法糖化。由于您没有添加任何代码，因此我不确定您尝试做什么。
我想创建一个组件来执行现有对象的更新/编辑，我创建了一个子组件并将对象的副本传递给它，但这似乎不是一个好方法这样做，对于编辑对象的最佳方法有什么建议，而无需导航到新组件并通过新的 API 调用来检索数据？
如果property是一个对象，你可以不用@Output，看stackblitz.com/edit/…中的简单例子

标签： angular typescript angular7

【解决方案1】：

对于两种方式的绑定工作，你必须实现一个@Output 与属性的名称相同，并将Change 作为后缀，如下所示：

 @Input() counter;
 @Output() counterChange = new EventEmitter();

在 html 中，添加 [(counter)]="someValue" 并像这样发出新值：

 this.counterChange.emit(this.counterValue);

首先，您需要将“计数器”设置为 getter/setter 属性，如下所示，并在 setter 中发出该事件 -

 private _counter: any;
      get counter(): any {
        return this._counter;
      }

     @Input() set content(value: any) {
        this._counter = value;
        this.counterChange.emit(value);
        // *Event emitting should done here*
      }
    
      @Output() counterChange = new EventEmitter<any>();

【讨论】：

没有必要。您正在使用对象作为输入，因此对象的“内存地址”始终相同，但属性可以更改，请参阅我的评论和我的 stackblitz
这真的很酷，没有意识到这种类型的双向数据绑定两个子组件是一回事。谢谢！
@Eliseo 你是对的，但你必须格外小心。如果整个应用程序都使用了 Input 对象，那么在更新 Input 对象时，所有使用该对象的组件都会被刷新。这可能是应用程序滞后的结果。

【解决方案2】：

@Input 指令是为单向绑定而设计的。您只能使用 @Input 为组件获取价值。使用@Output 指令从组件发出一个值，以便父组件接收该值。

【讨论】：

不，这不是必需的（原因是您使用对象作为@Input
这是正确的，输入和输出应该用作单向绑定。在你的情况下，因为它是对象（在共享代码中）它正在工作。 “双向数据绑定似乎不起作用”到底是什么意思？您要在父组件中使用该属性做什么？如果你只想在模板中渲染，我应该工作。