Question

所以我试图为我的网站制作一个通用加载图标。这是我到目前为止所做的。

  <div>
    <p *ngIf="questionsLoaded; else loadingSign" > {{lstQuestions?.length}} question/s found </p>
    <ng-template #loadingSign><app-loading></app-loading>></ng-template>
  </div>

然后在我的组件中，我有一个布尔值名称questionsLoaded，最初设置为false，但在数据到达后设置为true。像这样......

this.serverService.getQuestions(topicId, questionStatus).subscribe
      (
      data => {
        this.lstQuestions = data;
        this.questionsLoaded = true;
      },

我有一个名为LoadingComponent的组件（这是app加载的内容），这是我想要创建我的通用加载符号的地方。目前，它基本上只是一个具有此

的视图

<p>
  loading right now!
</p>

这一切都有效。但是，我希望我的代码更清晰。我的问题是关于ngElse。根据我的阅读，似乎我可以使用ngElse来引用ng-template。

是否必须在组件上定义ng-template，还是可以以某种方式将其导入组件？

所以而不是

  <div>
    <p *ngIf="questionsLoaded; else loadingSign" > {{lstQuestions?.length}} question/s found </p>
    <ng-template #loadingSign><app-loading></app-loading></ng-template>
  </div>

在app-loading是导入组件的情况下是否可以像这样？

  <div>
    <p *ngIf="questionsLoaded; else app-loading" > {{lstQuestions?.length}} question/s found </p>
  </div>

Answer 1

我认为不可能。

根据这篇文章：https://medium.com/aviabird/ngif-else-lands-in-angular-2-0-a242940e54ff

默认情况下，否则template为null，除非由本地指定引用HTML元素。

本地参考，因此导入的组件不是本地参考。

阅读文档后，https://angular.io/api/common/NgIf他们总是使用ng-template

NgElse可以引用导入的组件吗？

1 个答案: