Office JSのaddHandlerAsyncをAngularで使用する方法

Question

Angularを使用してExcelアドインを作成し、さまざまなセルのバインディングを作成しました。私はそれらのバインドされたセル内にデータを表示しているフォームがあり、セルのデータが変更されたときにフォームを更新したい。しかし

addHandlerAsync(Office.EventType.BindingDataChanged, <handler method>) 

https://dev.office.com/reference/add-ins/shared/binding.addhandlerasync

、私はTSの角度コンポーネントまたはサービスの内部で、ハンドラは、コンポーネントまたはサービスから任意のメソッドを呼び出すことができないことをやるしようとすると：OfficeJSライブラリーでは、使用して参照しますトリガされたときに発生します。ハンドラ内でのみOffice JSメソッドを実行できます。ハンドラ内からコンポーネントまたはサービスメソッドをトリガできるようにするにはどうすればよいですか？

アドインに何かを表示するなど、スプレッドシート内のセルバインディングで何かが変更されるたびに、アドインで何かをトリガーしたい場合、使用例があります。これは、サポートされる一般的な操作のように見えます。そして、ドキュメントはJSで似たような例を示します。

function addHandler() { 
Office.select("bindings#MyBinding").addHandlerAsync(
    Office.EventType.BindingDataChanged, dataChanged); 
} 
function dataChanged(eventArgs) { 
    write('Bound data changed in binding: ' + eventArgs.binding.id); 
} 
// Function that writes to a div with id='message' on the page. 
function write(message){ 
    document.getElementById('message').innerText += message; 
} 

私は似た何かをしようとしたときただし、：

createHandlerOnA1(): Promise<IOfficeResult> { 
     return new Promise((resolve, reject) => { 
      this.workbook.bindings.getByIdAsync(this.bindingName, (result: Office.AsyncResult) => { 
       if(result.status === Office.AsyncResultStatus.Failed) { 
        reject({ 
         error: 'failed to get binding by id' 
        }); 
       } else { 
        result.value.addHandlerAsync(Office.EventType.BindingDataChanged, this.changeEvent, (handlerResult: Office.AsyncResult) => { 
         if(handlerResult.status === Office.AsyncResultStatus.Failed) { 
          reject({ 
           error: 'failed to set a handler' 
          }); 
         } else { 
          // Successful 
          resolve({ 
           success: 'successfully set handler' 
          }); 
         } 
        }) 
       } 
      }) 
     }) 
    } 

    addHandler() { 
    this.createHandlerOnA1() 
    .then((result: any) => { 
     this.feedback = result.success; 
    }, (result: IOfficeResult) => { 
     this.feedback = result.error; 
    }); 
    } 

    changeFeedback() { 
    this.feedback = 'hello' 
    } 

    // Excel methods 
    changeEvent(eventArgs: any) { 
     Excel.run(async (context) => { 
      const data = [ 
       ["Hello World"] 
      ]; 
     const range = context.workbook.getSelectedRange() 
     range.values = data; 
     await context.sync(); 
    }); 
    // Handler cannot run this 
    // this.changeFeedback(); 
    } 

機能を、changeFeedbackは（）ChangeEventの（EventArgsの内から実行することはできません：any）ハンドラ。私は、問題を示すために、ここでは例のレポをした：

https://github.com/brandonkoch6/addHandlerAsyncError

それはこのようにそれを行うことでthisの結合を維持するように、私は、ハンドラへの参照を変更しようとしました：

addHandlerAsync(Office.EventType.BindingDataChanged, (eventArgs:any) => this.changeEvent(eventArgs)) 

addHandlerAsync(Office.EventType.BindingDataChanged, this.changeEvent.bind(this)) 

これは修正されません。だから、私は何をするのか分からない。

ご協力いただければ幸いです。私はハンドラが実行されるとき、 'this'のコンテキストオブジェクトと関係があると思う。そこハンドラを追加することの一環として、[オプション]パラメータがあるが、私は、ドキュメントで使用可能なオプションのすべてを見つけることができないよう：

https://dev.office.com/docs/add-ins/develop/asynchronous-programming-in-office-add-ins#passing-optional-parameters-to-asynchronous-methods

Answer 1

問題は、コードが外に実行されているので、角度ゾーン。

ゾーン内でコードを実行する必要があります。どのように動作するか理解するにはmy codeとthis articleを確認してください。

import { NgZone } from '@angular/core'; 

// ... 

constructor(private zone: NgZone) { } 

myFunction() { 
    this.zone.run(() => { 
    // the code 
    }); 
} 

P.S.私は問題hereを作成しました。すぐに文書を更新します。