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

Question

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

您可以在下面的插件中看到演示。如果 user1 创建无线电消息并在同一视图中提交选项，它会按预期工作。但是，如果用户 1 创建单选消息，用户 2 提交选项，则单选按钮消息不会被编辑，而只会生成一条带有选项 selected 的新消息。

我在这里面临的问题是我无法在点击事件上刷新视图。这将通过删除 select.

的选项来显示已编辑的单选按钮消息

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 代码并进行编辑。

Answer 1

从 AppService 中删除 setMessage 和 getMessage 方法。

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

我会使用 @Input 属性作为 Radio 组件

app.component.html home.component.html

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

radio.component.ts

@Input() message: Message;

Forked Plunker

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

How to refresh a part of the page view without refreshing the entire page in angular on a click event?

angular

typescript

dom

angular2-template

angular2-changedetection