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

【问题标题】：How to refresh a part of the page view without refreshing the entire page in angular on a click event?如何在单击事件时刷新页面视图的一部分而不刷新整个页面？
【发布时间】：2017-07-05 12:37:07
【问题描述】：

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

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

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

Angular 中有一个可用的 API：ChangeDetection。它是这样的：ANGULAR CHANGE DETECTION

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

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

附上相同的 Plunker：Angular chat application

有没有其他方法或解决方法来解决这个问题？随意分叉 plunker 代码并根据需要进行编辑。

【问题讨论】：

尝试创建两个收音机组件并更改收音机。你会发现你做错了什么。你不需要AppService.setMessage 和AppService.getMessage，因为这样你操作一个对象

标签： angular typescript dom angular2-template angular2-changedetection

【解决方案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;

Forked Plunker

【讨论】：

非常感谢。我花了将近一周的时间来解决这个问题。它解决了我面临的问题。顺便问一下，你说的我的实现有什么样的问题？
当您有 setMessage getMessage 时，您将无法使用您的实现创建多个无线电组件。您将为所有无线电组件仅更改一个相同的对象
当然。那将是一个问题。我现在明白了。再次感谢。