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

【问题标题】：How to create angular2 loading indicators button如何创建 angular2 加载指示器按钮
【发布时间】：2017-06-23 05:07:34
【问题描述】：

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

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

【问题讨论】：

标签： html angular angular2-directives

【解决方案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(){

  }
}

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

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

【讨论】：

感谢您的回复，尽管我正在考虑类似 lab.hakim.se/ladda 的事情。因此，当用户单击按钮加载指示器时，rxjs 订阅完成后会自动显示禁用指示器。只需将 true/false 传递给 waitUnit。感谢您花费的时间。