Question

我希望将AngularJS Typescript服务制作成Non-Singleton。请提出我该怎么做。（这与其他询问如何在JS中执行此操作的问题不同），在下面添加了简单的伪代码：

class TestService {

    private message: string;

    constructor() {
        this.message = 'Hello!';
    }

    greet() {
        console.log(this.message);
    }
}

angular.module("app").service("TestService", TestService);

Answer 1

与其在模块级别提供服务，不如在组件级别提供服务。

如下所示。

@Component（{ 选择器：“我的组件”，模板：sub_path，提供者：['myService'] }）

Answer 2

要拥有一个跨组件层次结构的共享实例的对象，您不使用服务，因为它们是单例的，您需要使用require获取父组件的实例，并将共享对象附加到该组件控制器。 / p>

angular.module('app', []).component('parentComponent', {
  template: 'Parent<br><ng-transclude></ng-transclude>',
  transclude: true,
  controller: function() {
    this.sharedData = {
      rnd: Math.random() * 10
    };
  }
}).component('childComponent', {
  template: 'child {{ $ctrl.parentCtrl.sharedData.rnd }}',
  require: {
    parentCtrl: '^parentComponent'
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="app">
  <parent-component>
    1. <child-component></child-component><br>
    2. <child-component></child-component><br>
  </parent-component><br>
  
  <parent-component>
    3. <child-component></child-component><br>
    4. <child-component></child-component><br>
  </parent-component>
</div>

查看组件的子代如何获取相同的实例，而另一个组件的子代如何获取另一个实例。

如何使用打字稿创建非Singleton的AngularJS服务？

2 个答案: