TypeScript / AngularJS - 使用 ngResource 服务答案

【问题标题】：TypeScript / AngularJS - Using ngResource ServiceTypeScript / AngularJS - 使用 ngResource 服务
【发布时间】：2023-03-22 15:09:01
【问题描述】：

我很难初始化一个新的资源对象。

从 REST API 检索数据工作正常。

以下代码行引发错误：

var newRoom = new this.lobbyStorage.LobbyRoom();

带有以下信息：

“this.$ngResource 不是函数”

我一直在尝试很多事情，但没有什么能让我取得积极的结果。

解决方案

使用语法 new Function(...) 或仅 Function(...) 创建的函数的 name 属性设置为空字符串。在以下示例中创建了匿名函数，因此 name 返回一个空字符串：

您不能更改函数的名称，该属性是只读的：

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/name

大厅存储.ts

module lobby.services {
  export class LobbyStorage {

    private baseUrl : string = 'http://localhost:2999'; /*this.appConstant.baseUrl + '/lobby';*/

    public static $inject = [
      '$http',
      '$resource'
    ];

    constructor(private $http: ng.IHttpService, private $ngResource : ng.resource.IResourceService /*,private appConstant*/) {

    }

    public LobbyRoom() : ng.resource.IResourceClass<ng.resource.IResource<any>> {
      return this.$ngResource(this.baseUrl + '/lobby/:id', { id: '@id' });
    }
  }
}

大厅模块.ts

///<reference path='../../typings/tsd.d.ts' />
module lobby {
  'use strict';

  /* @ngdoc object
   * @name lobby
   * @description
   *
   */
  angular
    .module('lobby', [
      'ngRoute',
      'ngResource'
    ])
    .service('lobbyStorage', lobby.services.LobbyStorage)
  /* .constant('appConstant', lobby.constants.Constants.Default);*/
}

大厅控制器.ts

/// <reference path='../_lobby.ts' />

module lobby.controllers {
  'use strict';

  class LobbyCtrl {

    public lobbyData : Array<string>;
    public gameCreation : boolean = true;
    public currentItem : any = {};

    // $inject annotation.
    // It provides $injector with information about dependencies to be injected into constructor
    // it is better to have it close to the constructor, because the parameters must match in count and type.
    // See http://docs.angularjs.org/guide/di
    public static $inject = [
      '$scope',
      '$log',
      'lobbyStorage'
    ];

    // dependencies are injected via AngularJS $injector
    constructor(private $scope, private $log : ng.ILogService, private lobbyStorage) {
      this.init();
    }

    // Initializer function
    private init(){
      this.initializeLobbyData();
    }

    public createRoom() : void{
      var newRoom = new this.lobbyStorage.LobbyRoom();
      newRoom.name = this.currentItem.name;
      newRoom.$save();
    }

    public initializeLobbyData(){
      var res = this.lobbyStorage.LobbyRoom().query(
        () => this.lobbyData = res,
        () => this.lobbyData[0] = "Error"
      );
    }
  }


  /**
  * @ngdoc object
  * @name lobby.controller:LobbyCtrl
  *
  * @description
  *
  */
  angular
    .module('lobby')
    .controller('LobbyCtrl', LobbyCtrl);
}

【问题讨论】：

标签： angularjs typescript ngresource angularjs-ng-resource

【解决方案1】：

这里的重点是我们调用的是函数而不是构造函数

// wrong
// this is not constructor call
var newRoom = new this.lobbyStorage.LobbyRoom()

// ok
// just a method
var newRoom = this.lobbyStorage.LobbyRoom()

有一个broken example（直接点击运行）

var x = new lobby.services.LobbyStorage({}, (str) => {return str});

try {
  var y = new x.LobbyRoom();
}
catch (ex){
  alert(ex);    
}

如果我们不将其称为构造函数，而是将其称为方法 - 它会起作用：

var x = new lobby.services.LobbyStorage({}, (str) => {return str});

var y =  x.LobbyRoom();

alert(y);

检查version here

【讨论】：

感谢您的提示，并没有完全注意这一点 - 有一次我超出了这一点，当我尝试将某些内容分配给资源对象时，又出现了错误。 newRoom.name = this.currentItem.name 导致 => TypeError: 无法分配给函数 Resource(value) { shallowClearAndCopy(value || {}, this); 的只读属性“名称”； }

【解决方案2】：

当您使用“new”调用 LobbyRoom 时，意味着您正在创建一个新对象。 LobbyRoom 使用的“this”将属于您正在创建的新对象，并且不会引用该类。你应该做两件事之一。要么创建一个 LobbyRoom 类，要么调用 LobbyRoom 而不像这样使用“new”：

var newRoom = this.lobbyStorage.LobbyRoom();

【讨论】：