Question

我有一个组件：

@Component('Umbrella', {
    selector: 'attachment-list',
    templateUrl: '/AttachmentListComponent/AttachmentList.html',
    bindings: {
        mediaIds: '<',
    }
})

public $onChanges() {
   console.log(this.mediaIds);
}

我在CaseFlowComponent中使用该组件：

组件：

我有一个上传方法：

public upload = (file: File) => {
    if (!file || !this.state.caseHistory) return;

    this.uploadService
        .upload({
            url: this.actionUrl,
            data: { file },
            method: 'POST'
        })
        .then((result: any) => {
            this.state.caseHistory.media.push(result.data);
            this.setMediaIds(result.data.id);
        });
};

还有一种将上传文件的ID推送到mediaIds数组的方法。

private setMediaIds(mediaId: Guid) {
    this.mediaIds.push(mediaId);
}

模板：

<attachment-list 
    media-ids='vm.mediaIds'
></attachment-list>

已将上传的文件ID正确添加到this.mediaIds中的caseFlowComponent数组中，但是$onChanges组件中未调用attachment-list。

我认为$onChanges应该在组件绑定更新时起作用。

Answer 1

$onChanges比较引用。您的选择是：

始终创建新数组
添加另一个输入以触发变更
手动观看

onChanges不适用于组件绑定

1 个答案: