angular2ローディングインジケータボタンの作成方法

Question

angle2のディレクティブ機能付きの単純なインジケータロードボタンを作成するにはどうすればよいですか？親コンポーネントで制御アクセスを使用すると、どこでも使用できますか？

// 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が取得されます。 1つの約束が満たされるまで、ボタン要素は、要件に応じて有効にすることができる。

同じためPlnkr：私は、代わりにこのhttp://lab.hakim.se/ladda/ような何かを考えていたがhttp://plnkr.co/edit/IptHfR?p=preview