Как добавить шаблон с прядильщиком в компоненте Angular 2

Question

У меня есть компонент spinner, который используется для отображения счетчика, когда 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> 

Кроме того, в классе SpinnerComponent марки isRunning в @Input

Ex -

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