循環参照 ~Service同士のDIで気をつけるべきこと~~
Serviceとは
AngularのServiceは、Componentでデータの受け渡しに集中するために、委譲されたロジックの部分の責務をもたせるというデザインパターンの一つです。
これによって、Componentのなかをシンプルにすることができます。
import { Injectable } from '@angular/core';
import { Hero } from './hero';
import { Observable, of } from 'rxjs';
import { catchError, tap } from 'rxjs/operators';
import { HttpClient, HttpHeaders } from '@angular/common/http';
@Injectable({
providedIn: 'root'
})
export class HeroService {
private heroesUrl = 'api/heroes';
constructor(
private http: HttpClient
) { }
public getHero(id: number): Observable<Hero> {
const url = `${this.heroesUrl}/${id}`;
return this.http.get<Hero>(url)
.pipe(
tap(_ => this.log(`fetched hero id=${id}`)),
catchError(this.handleError<Hero>(`getHero id=${id}`))
);
}
}
- Componentの記述がシンプルになり、保守性が高まります
- Componentで、Serviceを使うときはDI(Dependency Injection)をすることになります。(参考記事はこちら)
import { Component, OnInit } from '@angular/core';
import { Hero } from '../hero';
import { HeroService } from '../hero.service';
@Component({
selector: 'app-heroes',
templateUrl: './heroes.component.html',
styleUrls: ['./heroes.component.scss']
})
export class HeroesComponent implements OnInit {
public heroes: Hero[];
constructor(
private heroService: HeroService
) { }
ngOnInit() {
this.getHeroes();
}
private getHeroes(): void {
this.heroService.getHeroes()
.subscribe(heroes => this.heroes = heroes);
}
}
Service同士でDependencyInjectionしてみる
Service同士でDependency Injectionすることも可能です。
LoggerService
log関連のメソッドをもつService
import { Injectable } from '@angular/core';
import { Observable, of } from 'rxjs';
import { catchError, tap } from 'rxjs/operators';
import { HttpClient, HttpHeaders } from '@angular/common/http';
@Injectable({
providedIn: 'root'
})
export class Logger {
constructor(
) { }
private add(message: string) {
console.log(` ${message}`);
}
}
LoggerServiceをHeroServiceにDependencyInjectionする
errorが出たとき、logを出力します。
logを出力するというメソッドは、LoggerServiceに委譲するようにします。
これは,あるServiceからあるServiceへの一方向のDIとなります。
import { Injectable } from '@angular/core';
import { Hero } from './hero';
import { Observable, of } from 'rxjs';
import { catchError, tap } from 'rxjs/operators';
import { loggerService } from './logger.service';
import { HttpClient, HttpHeaders } from '@angular/common/http';
@Injectable({
providedIn: 'root'
})
export class HeroService {
private heroesUrl = 'api/heroes';
constructor(
private http: HttpClient,
private loggerService: LoggerService,
private messageService: Message
) { }
public getHero(id: number): Observable<Hero> {
const url = `${this.heroesUrl}/${id}`;
private messageService: MessageService,
return this.http.get<Hero>(url)
.pipe(
tap(_ => this.logggerService.add(`fetched hero id=${id}`)),
catchError(this.handleError<Hero>(`getHero id=${id}`))
);
}
}
循環参照を起こすDIの仕方
では、相互間のDIの場合、どうなるのでしょうか。
MessageService
heroServiceのgetHeroメソッドをaddUrlメソッドで使用しています。
import { Injectable } from '@angular/core';
import { Message } from './message';
import { Observable, of } from 'rxjs';
import { catchError, tap } from 'rxjs/operators';
import { heroService } from './hero.service';
import { loggerService } from './logger.service';
import { HttpClient, HttpHeaders } from '@angular/common/http';
@Injectable({
providedIn: 'root'
})
export class MessageService {
constructor(
private http: HttpClient,
private heroService: HeroService,
private loggerService: LoggerService
) { }
public addUrl(url: string): Observable<Message> {
this.heroService.getHero.subscribe(hero => {
const message = `この${url}では、${hero}が取得できます`;
this.loggerService.add(message);
)
}
}
HeroService
messageServiceのaddUrlメソッドをgetHeroメソッドで使用しています。
import { Injectable } from '@angular/core';
import { Hero } from './hero';
import { Observable, of } from 'rxjs';
import { catchError, tap } from 'rxjs/operators';
import { messageService } from './message.service';
import { loggerService } from './logger.service';
import { HttpClient, HttpHeaders } from '@angular/common/http';
@Injectable({
providedIn: 'root'
})
export class HeroService {
private heroesUrl = 'api/heroes';
constructor(
private http: HttpClient,
private messageService: MessageService,
private loggerService: LoggerService
) { }
public getHero(id: number): Observable<Hero> {
const url = `${this.heroesUrl}/${id}`;
this.messageService.addUrl(url);
return this.http.get<Hero>(url)
.pipe(
tap(_ => this.loggerService.add(`fetched hero id=${id}`)),
catchError(this.handleError<Hero>(`getHero id=${id}`))
);
}
}
上記では、MessageServiceでHeroServiceの返り値を取得してるが、その取得するためにはMessageServiceの返り値を取得しなければいけないという循環参照に陥っています。
当然ながらerrorが吐き出されます。
Uncaught Error: Can't resolve all parameters for HeroService: (?, [object Object], [object Object]).
at syntaxError (webpack-internal:///306:684)
at CompileMetadataResolver._getDependenciesMetadata (webpack-internal:///306:15764)
at CompileMetadataResolver._getTypeMetadata (webpack-internal:///306:15599)
at CompileMetadataResolver._getInjectableMetadata (webpack-internal:///306:15579)
at CompileMetadataResolver.getProviderMetadata (webpack-internal:///306:15939)
at eval (webpack-internal:///306:15850)
at Array.forEach (<anonymous>)
at CompileMetadataResolver._getProvidersMetadata (webpack-internal:///306:15810)
at CompileMetadataResolver.getNgModuleMetadata (webpack-internal:///306:15378)
at CompileMetadataResolver.getNgModuleSummary (webpack-internal:///306:15216)
注意するべきこと
このように相互間でのServiceは循環参照のerrorを起こす可能性があるので、注意してServiceをDependencyInjectionするべきです。
解決策
これへの解決策として中間Serviceを挟むなどがあります。
HogeServiceとFooServiceで循環参照を起こさないようにするために、MetaServiceを経由して、HogeServiceとFooServiceをやり取りするなどがあります。
参考記事
Author And Source
この問題について(循環参照 ~Service同士のDIで気をつけるべきこと~~), 我々は、より多くの情報をここで見つけました https://qiita.com/ryuseikurata/items/4bf56bc9188e011a9f9b著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .