結合使用Meteor和Angular2 / Typescript，如何基於客戶端事件從服務器端代碼調用外部Web服務？

Question

當用戶在客戶端中添加新條目時，我需要從服務器進行Web服務調用（客戶端代碼將無權訪問），並將一些其他信息添加到存儲在MongoDB中的數據中。 嘗試使用標准的Meteor.methods / Meteor.call模式似乎不起作用。

我是否需要監聽服務器和客戶端上“添加”按鈕上的單擊事件？ 我應該在服務器響應的客戶端上引發自定義事件嗎？ 是否有適當的方法可以直接調用服務器端方法？ 最重要的是，如何使TypeScript在所有這些方面感到高興？

我是Meteor上TypeScript層的新手，它使我陷入循環。 我一直在關注2.0的Angular-Meteor教程，但是這種情況還沒有涉及。

Answer 1

是的，您可以直接從服務器調用Web服務以接收數據。 我不確定您如何處理Meteor.methods/Meteor.call並說它沒有用。 但基本上，想法是客戶端將單擊按鈕，然后按鈕將觸發服務器上的方法。 然后，服務器方法將調用Web服務並返回數據。

一些示例代碼可能是：

Template['template'].events({
    'click .getData': function(event: any) {
        Meteor.call('serverMethod', function(err, res) {
            if (err) {alert(err);}
            else { ... }

        )
    }
});

對於新用戶來說，調用其余部分時最棘手的部分是您需要使用aysnc調用才能將數據返回給客戶端。 我們通常為此做輔助功能

    public static get(url: string, headers: any): any {
        var httpCall  = Meteor.wrapAsync(HTTP.call);

        var result = httpCall('GET', url, {headers: headers});

        if (result.statusCode == 200) {
            try {
                var res = JSON.parse(result.content);

                return res;
            } catch(err) {
                return result.content;
            }   
        }

        return null;    
    }

然后像這樣呼叫助手

public static serverMethod(username: string, password: string): any {
    var response = RestService.get(query.url, query.header); 
    return response;
}

這樣，上面的客戶端代碼中的res將獲得結果。

其實，我放棄了角2缺少文檔，但留在打字稿我的系統，因為我可以包裝打字稿類里面所有的流星電話，你可以在我的例子中看到， serverMethod在打字稿功能格式，而不是在像Meteor.methods({....})這樣的流星方式，目前真的很不錯

通常，這是我的服務器文件夾中的一個類

// server/rest.service.ts
declare var RestService: any;
RestService = class RestService {

    methodMap = {
        "getFromRest": RestService.get,
        "postToRest": RestService.post,
    };

    constructor() {
        var abstractService = new AbstractService();
        abstractService.registerMethod(this.getClassName(), this.methodMap);        
    }

    getClassName(): string {
        return this.constructor.toString().match(/\w+/g)[1];
    }

    //------------------------------------------------------------------------------------
    // Helper methods
    //------------------------------------------------------------------------------------
    public static get(url: string, headers: any): any {
        var httpCall  = Meteor.wrapAsync(HTTP.call);

        var result = httpCall('GET', url, {headers: headers});

        if (result.statusCode == 200) {
            try {
                var res = JSON.parse(result.content);

                return res;
            } catch(err) {
                return result.content;
            }   
        }

        return null;    
    }

我有一個類將打字稿服務映射到meteor方法

// server/abstract.service.ts
declare var AbstractService: any;
AbstractService = class AbstractService {
    constructor() {}

    public registerMethod (scopeName: string, methodMap: {[key:string]:any}) {
        var scopeMap: {[key:string]: any} = {};

        for (var key in methodMap) {
            scopeMap[scopeName + '.' + key] = methodMap[key];
        }

        Meteor.methods(scopeMap);
    }

Answer 2

使用angular2，Meteor和Typescript，有效的方法是鏈接Meteor.method。

首先在客戶端上，響應按鈕單擊...
Meteor.call（'importCsv'，id，function（error，result）{...

在collections / methods文件夾或類似文件夾中，我將方法定義如下：

Meteor.methods({
 'importCsv': function(id) {
    console.log('importCsv method on client');
    Meteor.call('importCsvServer',id);

 }

}）;

在服務器/文件夾中，文件包含以下方法

Meteor.methods({
'importCsvServer': function(id) {

....

在server / main.ts中，我導入集合/方法/文件名。 在client / app.ts中，我導入相同的內容。 客戶端Meteor.call成功調用第一個方法，然后在服務器/文件夾中調用第二個方法。

我的目標是在客戶端啟動的服務器上進行大量處理。 當我在導入到客戶端和服務器的集合/方法中定義的方法中進行函數調用時，會導致編譯器錯誤。

Angular2-Meteor問題74