Question

据我了解，组件中的Input字段应该是一个方向（父级到子级）。但是，我有一个值，我正在传递给Input，然后在组件中修改它，但我也注意到它在父级中的变化。这对我来说是有道理的，因为对象是通过引用传递的，但我猜这意味着整个“单向绑定”Angular集合的东西只是一种范式，而不是严格的？ Angular没有做任何事情来实施单向绑定吗？

基本上，我在做：

<session-form [values]="session"></session-form>

在session-form组件中，我将session.start从unixtimestamp更改为Moment对象。但是我在父母那里注意到，session.start也是一个Moment对象。

是否存在使用此类数据的范例？我是否应该将输入值复制到严格按照该组件设置的变量？

Answer 1

研究智能/哑（容器/表示）组件架构。

基本上，我们的想法是智能组件包含应用程序的状态或与包含该状态的服务进行通信。哑组件只是从@Input呈现给它的数据。智能组件将状态传递给哑组件。

不是直接更新哑组件中的数据，而是使用事件发射器告诉智能组件更新数据。这样就可以获得单向数据流。

更多信息： http://blog.angular-university.io/angular-2-smart-components-vs-presentation-components-whats-the-difference-when-to-use-each-and-why/

Answer 2

是的，对象通过引用传递。但是，您不应该使用[(ngModel)]将对象的属性绑定到表单，因为它是双向绑定，并且因为对象是通过引用传递的，所以它也反映了父组件内部对它的更改。您应该创建FormGroup并使用FormBuilder.group()函数将对象值传递给它，因为它是一个方向。

// Inside of your child component
@Input() myInput: SomeClass;

form: FormGroup

constructor(
    private formBuilder: FormBuilder
) { }    

ngOnInit(): void {
    this.form = this.formBuilder.group({
        prop1: [this.myInput.prop1],
        // etc.
    });
}

在组件输入更改父级中传递的值

2 个答案: