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

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

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

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

在Angular:ChangeDetection中有一个可用的API。 事情是这样的：

编辑（消息：消息）：无效{
让result=JSON.stringify（消息）；
如果（！结果）{
返回；
}
this.appService.update（this.message）
.然后（（）=>{
返回null；
});
}

从AppService中删除

setMessage

和

getMessage

方法

通过使用这些方法，您可以在共享服务中保存对象。由于对象和数组是可变的，这样的实现会有很多问题

我将为无线电组件使用

@Input

属性

app.component.html home.component.html

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

---

从AppService中删除

setMessage

和

getMessage

方法

通过使用这些方法，您可以在共享服务中保存对象。由于对象和数组是可变的，这样的实现会有很多问题

我将为无线电组件使用

@Input

属性

app.component.html home.component.html

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

---

尝试创建两个收音机组件并更改收音机。你会发现你做错了什么。您不需要

AppService.setMessage

和

AppService.getMessage

，因为这样您可以操作一个对象，尝试创建两个无线电组件并更改无线电。你会发现你做错了什么。您不需要

AppService.setMessage

和

AppService.getMessage

，因为这样可以操作一个对象，这非常感谢。我花了将近一个星期的时间来解决这个问题。它解决了我面临的问题。顺便问一下，您在谈论我所做的实现时遇到了什么样的问题？当您设置Message getMessage时，您将无法使用您的实现创建多个无线电组件。您将仅为所有无线电组件更改一个相同的对象。这将是一个问题。我现在明白了。再次感谢，非常感谢。我花了将近一个星期的时间来解决这个问题。它解决了我面临的问题。顺便问一下，您在谈论我所做的实现时遇到了什么样的问题？当您设置Message getMessage时，您将无法使用您的实现创建多个无线电组件。您将仅为所有无线电组件更改一个相同的对象。这将是一个问题。我现在明白了。再次感谢。