如何刷新頁面視圖的一部分，而無需在點擊事件中以角度刷新整個頁面？

我正在使用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

是否有任何其他方式或解決得到這個工作？如果需要，可以隨意分叉代碼並編輯。

來源

2017-07-05 Arun Gadag

嘗試創建兩個無線電組件並更改無線電。你會看到你做錯了什麼。你不需要'AppService.setMessage'和'AppService.getMessage'，因爲這樣你操縱一個對象 – yurzui

從AppService中刪除setMessage和getMessage方法。

通過使用這些方法，您可以在共享服務中保存對象。由於對象和數組是可變的，所以你會在這種實現中遇到很多問題。

我會用@Input屬性無線電組件

app.component.html home.component.html

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

radio.component.ts

@Input() message: Message;

Forked Plunker

來源

2017-07-05 13:52:00 yurzui

非常感謝。我花了差不多一個星期的時間來解決這個問題。它解決了我面臨的問題。順便說一句，你在談論我所做的實施時遇到了什麼樣的問題？ –

當您有setMessage getMessage時，您將無法使用您的實現創建多個無線組件。您將只更改所有無線電組件的同一個對象 – yurzui

當然。這將是一個問題。我現在明白了。再次感謝。 –

如何刷新頁面視圖的一部分，而無需在點擊事件中以角度刷新整個頁面？

回答

相關問題