2017-11-30 7 views
0

私は自分のサイトの一般的な読み込みアイコンを作成しようとしています。これは私が今までに得たものです。NgElseはインポートされたコンポーネントを参照できますか?

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

はその後、私のコンポーネントでは、私が最初にfalseに設定されていますが、データが到着した後、その後、trueに設定されているブール値の名前questionsLoadedを持っています。このような何か...

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

私は私が私の一般的なロードサインを作成したいところです(何のアプリローディングの負荷である)LoadingComponentと呼ばれるコンポーネントを持っています。現時点では、基本的にはこれを持つビューです。

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

のそれはアプリローディングは輸入部品がどこにあるかのようにそれを持っていることは可能ですか?

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

を使用しています。 –

+0

@AnkitKapoor - あなたはそれについて詳述できますか? – Diskdrive

答えて

0

私は考えられません。この記事によると

:デフォルトではhttps://medium.com/aviabird/ngif-else-lands-in-angular-2-0-a242940e54ff

HTML要素へのローカル 参照して指定しない限り、他のテンプレートは、nullです。

インポートされたコンポーネントはローカル参照ではありません。

とドキュメントを読んだ後:https://angular.io/api/common/NgIf彼らは常にその代わり、あなたがTemplateRefの形式で、親からの入力として、それを提供することができます輸入部品のng-template

関連する問題