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

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

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

---

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

@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，因此您可以显示加载符号或禁用button元素，直到承诺实现为止，一旦实现承诺，可根据要求启用按钮等

---

Plnkr：谢谢您的回复，尽管我正在考虑类似的事情。所以当用户点击按钮时，在rxjs订阅完成后，加载指示器会自动显示为禁用指示器。只需将真/假传递给waitUnit。谢谢你花了这么多时间。