如何顯示在角4

子組件加載文字在我的「event.component」我有一個子組件（APP-GROUPLIST）如何顯示在角4

<div class="group-list"> 
<app-grouplist 
[hasStarted]="started" 
[hasEnded]="ended" 
Loading Groups... </app-grouplist> 
</div>

在頁面初始加載，子組件不顯示立即。我想要做的是，在子組件尚未顯示的同時顯示「加載組...」文本。

來源

2017-09-04 Carl Sare

你可以顯示「子組件未立即顯示」的原因嗎？ – Pengyy

由於此子組件從API服務加載數據。 –

您可以使用，如果在模板/ else邏輯與ngIf像：

<app-grouplist *ngIf="childrenReady;else loading" 
    [hasStarted]="started" 
    [hasEnded]="ended"> 
</app-grouplist> 

<ng-template #loading>Loading...</ng-template>

對於這個工作，你需要設置一個知道當孩子準備好顯示變量，稱爲childrenReady在這個例子中。這將顯示應用程序組列表，如果這是真的，但內容在「＃加載模板，如果沒有。

你也可以在子組件而不是容器中做這個邏輯，如果容器沒有/可以「知道孩子的狀況。

來源

2017-09-04 03:23:51 bryan60

在你的子組件。你可以使用NG-內容顯示父模型。例如，

父組件

<app-grouplist [hasStarted]="started" [hasEnded]="ended">Loading Groups...</app-grouplist>

輔元件

<ng-content *ngIf="loading else loadedData"></ng-content> 

<div *ngIf="loading" #loadedData>....elem here...</div>

不要忘記在您的子組件typescript代碼中添加變量加載：布爾值。

來源

2017-09-04 04:14:37

如何顯示在角4

回答

相關問題