如何创建 angular2 加载指示器按钮

Question

如何在 angular2 中创建具有指令功能的简单指标加载按钮，以便可以在任何地方使用。还可以在父组件中使用控制访问权限？

// Something like this
<button loading [waitUntil]="listenToParent">Submit</button>

Answer 1

您可以像这样为相同创建一个指令：

@Directive({
  selector:'[loading]',
  inputs: ['waitUntil']
})
class Loading {
  private dataPromise: Promise;
  constructor(el: ElementRef){
  }
  set waitUntil(data:Promise) {
    this.dataPromise = data;
    this.dataPromise.then(function(message) {
      alert(message);
    })
  }
}

用于实现相同的组件：

@Component({
  selector: 'my-app',
  template: `
  <h2>Hello World</h2>
  <button loading [waitUntil]="thePromise">button</button>`,
  providers: [], 
  directives: [Loading]
})
export class App implements ngAfterViewInit{
  name:any;
  thePromise: Promise ;
  constructor() {
   this.thePromise = new Promise((resolve, reject) => {
      setTimeout(function() { resolve("API call complete hide loader.");}, 1000);
    });
  }
  ngAfterViewInit(){
  }
}

从上面的例子中，你可以看到在父级中声明的承诺是如何在指令中传递和实现的，在指令的构造函数中，你得到了可用于操作元素的elementRef，所以你可以显示加载符号或禁用按钮元素，直到承诺实现， 一旦兑现了承诺，就可以根据需要启用按钮等。

Plnkr 相同：http://plnkr.co/edit/IptHfR?p=preview