將數據從外部應用程序發布到 Angular App 並將結果顯示在外部應用程序中作為彈出窗口的有效方法是什么？

Question

我有一個要求，當用戶單擊外部應用程序（.net 框架 Web 應用程序）中的鏈接時，我需要將一些數據發布到 angular 應用程序。

然后該 Angular 應用程序將調用 web-api 並將結果顯示為彈出的 int 外部應用程序瀏覽器。

我知道 angular 是針對客戶端的，它不能接受發布請求。

如果我直接從外部應用程序調用 api，那么 api 將返回數據，但我應該如何將數據綁定到 angular 組件，以便它可以在外部應用程序中顯示為彈出窗口。？

Answer 1

哦，天哪，這個很有趣。 取決於你想做什么。

使用參數重定向

• 啟動 .net 應用程序
• 從 .net 應用程序發布
• 使用一些獲取參數重定向到您的 Angular 應用程序，告訴它顯示它想要什么

通過本地存儲進行通信（如果您已經打開了 angular 選項卡，則可以選擇。使應用程序偵聽本地存儲更改，並從 .net 應用程序更新存儲。

聆聽的簡單例子

// Listen to storage, this way
window.addEventListener("storage", this.storageEventListener.bind(this));


private storageEventListener(event: StorageEvent) {
 if (event.storageArea == localStorage) {
      // Read some value
      // do something with the value
 }
}

使用一些服務器推送技術。 如果您在多個不同的瀏覽器中打開應用程序（因此它們無法訪問相同的本地存儲），那么這將是您最好的選擇。

有關 signalR 的一些示例 - 檢查這個。

Answer 2

但是，更好的做法是擁有單獨的服務文件和組件文件，但只需在您的組件中執行以下操作：

import { Component, OnInit } from '@angular/core';
import { HttpClient} from '@angular/common/http';


@Component({
  selector: 'app-example',
  templateUrl: './app-example.component.html',
  styleUrls: ['./app-example.component.scss']
})
export class AppExampleComponent implements OnInit { 

   public dataSource: any;

   constructor(private _http: HttpClient){}

   ngOnInit() {
    this._http.get("your WebApi link here").subscribe( (data) => {
       this.dataSource = data.data; 
    });
   }

}

通過這種方法，您可以從提供 GET API 的 webApi 檢索數據。 在dataSource變量中是可以在 HTML 文件中呈現它的數據。

Answer 3

將外部鏈接綁定到 angular 應用程序的路由。 通過單擊鏈接 angular 應用程序將啟動並在所需的組件中，在組件的ngOnInit()方法中發出 http 請求以檢索數據和顯示。

希望這可以幫助您，如果還有任何其他問題，請告訴我。