更新已降级为AngularJS并在两个不同位置重新使用的Angular组件的更改

我有一个Angular Component,我已降级,因此可以在AngularJs中使用 . 它用于弹出模式对话框,降级成功,组件按预期运行,但唯一的问题是当模态对话框关闭时,这些更改不会反映在Angular组件中 .

每次组件运行时以及打开模型对话框时,ngOnInit生命周期都用于异步数据 .

在应用程序视图中,组件处于角度环境中并像这样使用:

<interaction-component [interactionComponentData] = "data"></interaction-component>

在弹出模型对话框中,它位于angularJS环境中并像这样使用:

<interaction-component [interaction-component-data] = "data"></interaction-component>

假设我有一个交互按钮,单击它时会在组件视图中显示一个计数,当执行此操作并且组件在Angular中运行时,它会更新计数,并且在启动模型对话框时 - 组件在AngularJs中运行 . 因为ngOnInit - 每次组件运行/重新运行时计数都会更新 .

在启动模型对话框之前,此组件的计数为3.模态对话框启动计数仍为3,现在我单击组件的交互按钮并将计数增加到4.在对话框中我看到计数为4但是当对话框关闭Angular中的相同组件仍然具有类似3的计数 .

这就是发生的事情:

AngularJs数为3

角度计数3

单击并将模态对话框中的计数增加到4

AngularJs数为4

角度计数3

关闭模型对话框

角度计数3(此计数应为4)

这些变化是否有可能保持同步,所以当Angular中的变化反映在AngularJS中时(反之亦然)?

enter image description here


来自评论

根据toggleClick方法应用更改,该方法执行许多操作,递增计数,切换为:true ||假 . 然后与服务器通信并进行PUT . 这是从它自己的方法中提取的:

toggleClick(): void { 
    this.interactionComponentData.liked = !this.interactionComponentData.liked;
    this.interactionComponentData.count = this.interactionComponentData.liked ? this.interactionComponentData.count + 1 : this.interactionComponentData.count - 1; 
}

然后ngOnIt发出请求以使用toggleClick方法应用更改 .

ngOnInit(): void {
    this.interactionComponentData = post.get({}, {}, endpoint); 
    //Other code for DOM use 
}

我在这里想要实现的是当模态对话框打开时,单击interactionComponent中的按钮时,两个组件都会更新 . 在模态弹出对话框和模态弹出对话框外 . 请注意,在模态对话框中,组件被降级,在模态弹出对话框之外不是 .

回答(0)