角2のコンポーネントにスピナーテンプレートを追加する方法

Question

私はスピナーコンポーネントを持っています。これは、HTTPリクエストに少し時間がかかったときにスピナーを表示するために使用されます。

@Component({ 
    selector: 'my-spinner', 
    template: require('./spinner.component.html'), 
    styles: [require('./spinner.component.css').toString()] 
}) 

さて、私はパラメータの下を通過する必要が別のコンポーネント（「FooterComponent」と言わせて）、

[isRunning]="isRequesting" 

にこのスピナーコンポーネントを使用したい私は、テンプレートの一部としてこれを渡すことができますが、また、コンポーネント「FooterComponent」のテンプレートもサポートする必要があります。

質問、どうすれば両方をサポートできますか？

import { Component, OnInit } from '@angular/core'; 
import { DataService } from '../../services/DataService'; 
import { SpinnerComponent } from '../spinner/spinner.component'; 

@Component({ 
    selector: 'starterTemplateFooter', 
    template: require('./footer.component.html'), 
    //how to add below template along with above template? 
    //template: '<my-spinner [isRunning]="isRequesting"></my-spinner>' 
}) 

export class FooterComponent { 
public isRequesting: boolean; 
public values: any[]; 

constructor(
    private _dataService: DataService) { 
    this.refresh(); 
} 

public refresh(): void { 
    this.isRequesting = true; 
    this._dataService.GetAll() 
     .subscribe(
     result => this.values = result, 
     () => this.stopRefreshing(), 
     () => this.stopRefreshing()); 
} 

private stopRefreshing() { 
    this.isRequesting = false; 
} 
} 

Answer 1

SpinnerComponentをFooterComponentのディレクティブとして追加します。

import { Component, OnInit } from '@angular/core'; 
import { DataService } from '../../services/DataService'; 
import { SpinnerComponent } from '../spinner/spinner.component'; 

@Component({ 
    selector: 'starterTemplateFooter', 
    template: require('./footer.component.html'), 
    // directives: [SpinnerComponent] // this is deprecated! 
    entryComponents: [SpinnerComponent] 
}) 

とフッターのテンプレート（footer.component.html）に

がSpinnerComponentをこのように使用してください -

<my-spinner [isRunning]="isRequesting"></my-spinner> 

また、@Input

としてSpinnerComponentクラスマーク isRunningに

例 -

export class SpinnerComponent { 
    @Input() isRunning: boolean; // If it is a boolean 
}