如何在Angular 2组件中添加旋转器模板

Question

i有一个旋转器组件，用于在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
}