Question

所以我习惯使用工厂和工厂。 Angular的服务。

我正在阅读Angular2文档，而且我没有看到任何相同的工厂。 Angular2的等价物是什么？

Answer 1

工厂，服务，常数和价值观都在Angular2中消失了。 Angular2与经典的Angular完全不同。在Angular2中，核心概念是

部件
依赖注入
结合

服务，工厂，提供商和常数的概念在Angular 1中受到批评。很难在两者之间做出选择。删除它们可以简化一些事情。

在原始的Angular中，您将定义一个类似的服务

app.service('BookService', ['$http', '$q', BookService]);
function BookService($http, $q){
  var self = this;
  var cachedBooks;
  self.getBooks = function(){
    if (cachedBooks) {
      return $q.when(cachedBooks);
    }
    return $http.get('/books').then(function(response){
      cachedBooks = response.data.books;
      return cachedBooks;
    })
  }
}

Angular2显着利用ES6语法使代码更易读，更容易理解。

ES6中的一个新关键字是class，可以将其视为服务。

ES6类比基于原型的OO模式简单。拥有一个方便的声明形式使类模式更易于使用，并鼓励互操作性。类支持基于原型的继承，超级调用，实例和静态方法和构造函数。

以下是Angular2中相同代码的外观

import {HttpService, Promise}  from '../Angular/Angular2';
export class BookService{
    $http, $q, cachedBooks;
    constructor($http: HttpService, $q: Promise) {
        this.$http = $http;
        this.$q = $q
    }
    getBooks() {
    if (this.cachedBooks) {
        return this.$q.when(this.cachedBooks);
    }
    return this.$http.get('/books').then(function(data) {
        this.cachedBooks = data.books;
        return this.cachedBooks;
    })
  }
}

Answer 2

@Richard Hamilton的回答表示赞赏，除此之外，还有几点需要注意。

对于工厂，服务等，在Angular2中我们有服务（或共享服务）。我们必须提供服务Injectable才能使用它。

注意：此代码属于测试版，而非RC。

import {Component, Injectable,Input,Output,EventEmitter} from 'angular2/core'
import {Router} from 'angular2/router';
import {Http} from 'angular2/http';

export interface ImyInterface {
   show:boolean;
}

@Injectable()      <---------------------------- Very Important
export class sharedService {  <----------------- Service Name
  showhide:ImyInterface={show:true};

  constructor(http:Http;router:Router)
  {
    this.http=http;
  }     
  change(){
        this.showhide.show=!this.showhide.show;
  }
}

如果我想在我的应用程序中随处使用，那么我必须在这样的bootstrap函数中注入此服务，

bootstrap(App, [HTTP_PROVIDERS,sharedService    <--------Name Injection
      ROUTER_PROVIDERS,bind(APP_BASE_HREF).toValue(location.pathname)
]);

这样就可以创建服务的单个实例。如果您不想使用单个实例，那么您可以做的是 - 您可以在Providers:[sharedService]装饰器中使用@component元数据。

然后，在你的其中一个组件中使用它，

export class TheContent {
  constructor(private ss: sharedService) {  <--------Injection dependency of your newly created service
    console.log("content started");
  }
  showhide() {
    this.ss.change();  <----- usage
  }
}

Check working example here

Answer 3

我不知道工厂在Angular1中究竟做了什么，但在Angular2中有useFactory：

{ 
  provide: SomeClass, 
  useFactory: (dep1, dep2) => (x) => new SomeClassImpl(x, dep1, dep2),
  deps: [Dep1, Dep2]
}

如果默认值与您的需求不匹配，则提供您自己的实例构造逻辑。

您也可以自己注入工厂来创建新实例：

/* deprecated or removed depending on the Angular version you are using */
provide(SomeClass, {
    useFactory: (dep1, dep2) => {
        (x) => new SomeClassImpl(x, dep1, dep2), 
    },
    deps: [Dep1, Dep2]
})

constructor(@Inject(SomeClass) someClassFactory: any) {
  let newSomeClass = someClassFactory(1);
}

参数x必须具有类型赋值，否则angular不知道如何处理它。

class SomeClassImpl {
  constructor(x: number, dep1: Dep1, dep2: Dep2){}
}

Answer 4

如果您需要某个组件中的新服务实例，则需要在该组件中提供该实例，如下所示：

@Component({
  selector:    'hero-list',
  templateUrl: './hero-list.component.html',
  providers:  [ HeroService ]
})

这会像工厂一样生成HereService的新实例。

Angular2中的工厂相当于什么？

4 个答案: