如果數據未在Angular中加載，請添加加載html

我們的應用中有很多組件。
某些組件需要來自服務器的數據，然後只顯示html。
直到數據不來，我們需要顯示一些加載欄的HTML。
如果數據未在Angular中加載，請添加加載html

我想弄清楚是否有任何通用的解決方案呢？
我可以將* ngIf放入每個組件中，但我正在考慮更通用的解決方案。

所以目前我在想。

創建一個指令
通行證對象內部指令
檢查內部指令，如果對象是可用的
如果其不可用，裏面添加元素一些HTML。

直到現在下面的代碼被寫入。

@Directive({ 
    selector: '[appCustomLoad]' 
}) 
export class CustomLoadDirective implements AfterViewInit{ 

    constructor(private templateRef: TemplateRef<any>, 
       private viewContainer: ViewContainerRef, 
       private renderer: Renderer, 
       private el: ElementRef) { 

    } 

    @Input() set appCustomLoad(shouldAdd: boolean){ 
    // currently i am passing boolean for testing, 
    // if i use this solution then i will change boolean to any. 
    // and if object is not null or undefined then we will show loading bar with some msg. 
    if(shouldAdd){ 
     this.viewContainer.createEmbeddedView(this.templateRef); 
    }else{ 
     this.viewContainer.clear(); 
    } 
    } 

    ngAfterViewInit(): void { 
    // after view init 
    } 
}

我不能在我的div使用指令添加html。

我不知道這是正確的方式去，如果您有任何更好的解決方案話，請給我一些想法。

來源

2017-06-29 Nitish

你的組件架構是什麼樣的？我猜你可能可以在你的根組件中執行你的請求，並用一個'ngIf'來包裝你需要隱藏的任何其他組件？ –

有一個非常簡單的方法來做到這一點，但它並不優雅。該解決方案是創建一個service.loading變量，gloabal：

serviceTest.loading = 0;

內。然後您檢索數據由1加量：

serviceTest.loading++;

現在你可以創建任何加載動畫你想

ng-if="serviceTest.loading > 0" 
    //display loading gif

後，將檢索數據通過減少值一

serviceTest.loading--;

您使用整數而不是布爾值的原因是您想支持多個檢索。像這個整數應該上升到3，並且你不希望加載在所有3個請求完成之前結束。

來源

2017-06-29 13:16:24

感謝您的回覆。但可能是我沒有以正確的方式提出問題，因爲1.它的角度2應用程序。 2.如果數據不來，那麼我只是想添加HTML而不是顯示div內的數據。 3.爲了測試我已經使用布爾值，但是我會將其作爲任何值。因爲可以有任何種類的對象傳遞給指令。 – Nitish

好的，因爲你使用的是角度2，所以rootcope會變成一個服務，但這個概念仍然是一樣的。我會更新我的答案。 –

如果數據未在Angular中加載，請添加加載html

回答

相關問題