如何在单击事件时刷新页面视图的一部分而不刷新整个页面？

Question

我正在使用Angular构建聊天应用程序。 我有两个聊天组件。 每个用户一个。 我正在使用一个单选按钮组件，该组件创建一个新消息作为单选按钮。 用户选择一个选项。 用户单击提交按钮后，将编辑单选按钮消息，并使用用户选择的选项打印一条新消息。

您可以在下面的插塞中查看演示。 如果user1创建了无线电消息并在同一视图中提交了该选项，则它将按预期工作。 但是，如果user1创建了单选消息，而user2提交了该选项，则单选按钮消息不会被编辑，而只会生成一个带有选中选项的新消息。

我在这里面临的问题是我无法刷新click事件的视图。 通过删除要选择的选项，这将显示已编辑的单选按钮消息。

Angular中有一个可用的API：ChangeDetection。 它是这样的：角度更改检测

 edit(message: Message): void { let result = JSON.stringify(message); if (!result) { return; } this.appService.update(this.message) .then(() => { return null; }); } 

但我无法在点击事件上使用此API。

附带了同一个柱塞： 角度聊天应用程序

还有其他方法或解决方法来解决这个问题吗？ 随意派发插件代码并根据需要进行编辑。

Answer 1

从AppService中删除setMessage和getMessage方法。

通过使用这些方法，可以将对象保留在共享服务中。 而且由于对象和数组是可变的，因此您将在实现上遇到很多问题。

我将对Radio组件使用@Input属性

app.component.html home.component.html

<mm-radio-message [message]="message" ...></mm-radio-message>

radio.component.ts

@Input() message: Message;

分叉柱塞