将模型的不同更改传输到子组件的正确模式是什么？

Question

您好，我有一个允许一个 select 不同字段的父组件。我正在使用 nz-zorro 的日期 selector 和 select 组件。例如，来自日期 select 的日期或来自下拉 select 字段的几个字符串等。我认为您可以使用 Subject 事件来发出对子组件输入的更改，以及当调用任何单个字段 select 或回调时。

在我看来，为每个变量制作一个 event/input/output 是一种重复模式，可以通过将我关心的所有这些字段映射到一个模型来避免这种模式。

然后我的问题变成了如何在一个函数中或以非代码粘贴方式同步对模型的任何字段的更改....

var1DateEvent: Subject <Date> = new Subject <Date>();
var2StringEvent: Subject <string> = new Subject <string>();

而不是

onvar1Change(){ this.var1DateEvent.next(this.ngModelDate)}
onvar2Change(){ thos.var2StringEvent.next(this.ngModelString)}

其中模型变量是映射到我的 UI 组件的模型，onvar1Change() 是映射到那个 UI 元素的回调，子组件在其初始化文件中订阅这些 Input Observable .

我想要做的是拥有一个包含所有这些可变字段的自定义模型，每当模型的任何字段发生更改时，UI 都会向子组件发出整个模型的事件。这对我来说是一个更好的模式，但我不确定如何去做，因为我是 Angular.

的新手

Answer 1

如果您的组件中有父子关系，则无需使用 subject observable，我建议您使用 @Input 和 @Output，以同步子组件中的更改

首先在你的父组件中创建一个变量：

var1DateEvent:any;

在您调用子组件的 html 文件中，将此代码粘贴到：

<your-app-selector-name [var1DateEvent]="var1DateEvent" ></your-app-selector-name

在您的子组件位置：

@Input() var1DateEvent;

并调用 ngOnChanges() :

ngOnChanges(){
console.log('changes from parent component',var1DateEvent);
}

您还需要从以下位置导入输入：从 '@angular/core';

导入 { Component, OnInit ,Input }

希望对您有所帮助，谢谢

将模型的不同更改传输到子组件的正确模式是什么？

What is a right pattern for transmitting different changes to a Model to a Child Component?

observable

angular8

ng-zorro-antd