我有 2 個不同的螢屏，兩個螢屏的 ui 是相同的。我已經與其中一個螢屏的 api 集成。但是，由于兩個螢屏都重用了相同的組件，那么一個組件如何與兩個不同的 api 集成呢？
uj5u.com熱心網友回復：
你的問題太模糊了，所以它會產生很多可能與你的問題無關的答案。
我對您的問題的解釋是您有 2 個看起來相同的頁面，但它們的資料應該來自 2 個不同的 API，并且您想知道如何為兩個螢屏重用相同的組件。
我會將組件拆分為純展示組件，該組件僅通過 @Input() 接收資料并呈現它。這是您可以重復使用的部分。然后創建 2 個單獨的容器組件（每個頁面一個），它以任何需要的方式檢索 API 資料，然后將該資料提供給您的演示組件。這種方法遵循 SRP（單一職責原則）
uj5u.com熱心網友回復：
environment.ts你在檔案中添加你的后端 url
例如：在environment.ts：
export const environment = {
production: false,
baseurl:"http://localhost:8040" <-- That line of code
};
uj5u.com熱心網友回復：
為了解決這個問題，可以有多種方法來解決它。我也有同樣的問題陳述。
所以這里我做了幾件事（這對你來說可能不可行）
- 在我的第二個 UI（相同的 UI）的 URL 中添加了一個額外的查詢引數鍵
- 現在，在該功能模塊的最頂層父組件中，我捕獲了該查詢引數并將其傳遞給所需的子組件。
- 在服務中為同一 UI 創建了 2 個 URL
例如：
getDataForFirstUIUrl = 'http:/www.firsturl.com';
getDataForSecondUIUrl = 'http:/www.secondurl.com'
getDataForBothUI(myQueryParamsFlag: boolean): Observable<any> {
return this.http.get(myQueryParamsFlag ? this.getDataForFirstUIUrl : this.getDataForSecondUIUrl)
}
現在在您的組件中，您應該像這樣嘗試：
@Input() myQueryParamsFlag: boolean; getDataForMyUI() { this.myService.getDataForBothUI(myQueryParamsFlag).subscribe((data) => { // do whatever you want to do }) }
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/532558.html
標籤：有角度的
下一篇：打字稿中的第31天更改為第1天