Question

我正在尝试绕过现代Angular，无论出于什么原因，数小时的谷歌搜索都无法带来清晰度（可能是我跳过了午餐）。我正在尝试制作文件上传小部件的原型以开始使用。

这是我到目前为止所拥有的：

“文件-具有一些属性的简单类，其中一些是有状态的（例如，上传状态）
“ FileComponent”-用于呈现文件的组件
“ FileListComponent”-包含属性的组件，该属性是文件数组。

我需要执行以下操作：

当用户在FileListComponent上进行拖放时，实例化新的File对象
在文件对象上传时更新其状态
当其相应的文件状态更改时，让FileComponent的视图刷新

FileListComponent的模板如下所示：

<div class="file-list">
    <file-comp *ngFor="let file of files" [file]="file"></file-comp>
<div>

FileComponent的模板如下：

<div class="file">
    <div>{{ file.filename }}</div>
    <div>{{ file.status }}</div>
<div>

我可以添加新文件，它们显示在使用FileComponent呈现的FileListComponent中。到目前为止一切顺利...

这就是我被困住的地方...

随着“ file.status”的更改，我希望FileComponent进行更新。

听起来好像我想利用Observables，但是我读过的大多数示例都显示了从调用返回的对象的AJAX示例，而与如何使Observable类的各个属性无关。同样，大多数示例都将数据属性显示为组件类本身的一部分，而不是单独的对象。

有人知道我可以将一个简单的对象连接到一个组件，并对该对象的属性进行更改以反映在组件的渲染中的示例吗？

Answer 1

EventEmitter 是基于Subject（可观察和可观察者）构建的。
主题主要用于发送信号，并且不能保存值。
像Subject这样的对象很少：

BehaviorSubject -与“主题”相似，但可以保留一个最新值，因此每个订阅者都可以访问最后一个发出的值。
ReplaySubject -与BehaviorSubject相似，但是可以根据对象的初始化保存多个发射值。

如果您遇到这种情况，建议您使用BehaviorSubject之类的东西，这样您就可以保留当前的进度。您可以使用以下类似的方法在父组件和子组件之间共享数据：
父母：

<child-component 
  data="someObjectFromParnet" (somethingChange)="changeFunc($event)">
</child-component>

在代码中：

changeFunc = (event) => {
 console.log(event);
}

孩子：

@Input() data;
@Output() somethingChange = new EventEmitter();

constructor(){
 console.log(data); // <-- data sent from parent.
 this.somethingChange.emit(`sending back data to parent${data}`);
}

对“普通”对象使用角度可观察的发射器还是事件发射器？

1 个答案: