Question

在我的“event.component”中，我有一个子组件（app-grouplist）

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

在初始加载页面时，子组件不会立即显示。我想要做的是，在子组件尚未显示时显示“正在加载组...”文本。

Answer 1

在您的子组件中。您可以使用ng-content显示父模型。例如。

父组件

<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>

不要忘记在子组件打字稿代码中添加变量loading：boolean。

Answer 2

您可以在模板中使用if / else逻辑，例如：

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

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

为此，您需要设置一个知道孩子何时准备好显示的变量，在本例中称为childrenReady。如果这是真的，这将显示app-grouplist，如果没有，则显示＆＃34; #loading模板中的内容。

如果容器不能/不能知道孩子的状态，你也可以在子组件而不是容器中执行此逻辑。

如何在Angular 4中显示子组件加载文本

2 个答案: