web-dev-qa-db-ja.com

Angular2のファクトリに相当するものは何ですか？

だから、私はAngularで工場とサービスを使用することに慣れています。

Angular2のドキュメントを読んでいますが、工場に相当するものがありません。 Angular2に相当するものは何ですか？

angularjsangular
13
user2202911

ファクトリー、サービス、定数、および値はすべて、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の新しいキーワードの1つは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;
    })
  }
}
15
Richard Hamilton

@Richard Hamiltonの回答は高く評価されており、それに加えて注意すべき点はほとんどありません。

工場、サービスなどの場合、Angular2にはservice（または共有サービス）があります。サービスを使用するには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
  }
}

実際の例を確認してください

14
micronyks

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){}
}
7
Günter Zöchbauer

あるコンポーネントでサービスの新しいインスタンスが必要な場合、次のようにそのコンポーネントでそれを提供する必要があります。

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

これにより、ファクトリと同様にHereServiceの新しいインスタンスが生成されます。

1
Damsorian