Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Angular DIスキ
Search
Shinichi Kozake
March 20, 2017
Technology
2
1.4k
Angular DIスキ
ng-kyoto Angular Meetup #5
の発表資料です。
Shinichi Kozake
March 20, 2017
Tweet
Share
More Decks by Shinichi Kozake
See All by Shinichi Kozake
アーキテクトとは
kozake
0
2.2k
Ionic React でサービス開発したお話
kozake
0
140
ドキッ!失敗だらけのシステム開発
kozake
1
830
やはり俺のWeb APIは間違えている
kozake
0
540
すごい大規模 たのしく作ろう
kozake
4
2.4k
KHipster ~JHipsterで始めるKotlin Web プログラミング~
kozake
0
890
Docker with JHipster
kozake
1
570
実践JHipster #jsug #sf_36
kozake
2
7.7k
Ionicでアプリ作ったよ!開発方法の紹介
kozake
2
1k
Other Decks in Technology
See All in Technology
生成AI時代 文字コードを学ぶ意義を見出せるか?
hrsued
1
810
AWS Organizations 新機能!マルチパーティ承認の紹介
yhana
1
270
LangSmith×Webhook連携で実現するプロンプトドリブンCI/CD
sergicalsix
1
200
Should Our Project Join the CNCF? (Japanese Recap)
whywaita
PRO
0
330
2025-06-26_Lightning_Talk_for_Lightning_Talks
_hashimo2
2
120
生まれ変わった AWS Security Hub (Preview) を紹介 #reInforce_osaka / reInforce New Security Hub
masahirokawahara
0
440
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
27k
モバイル界のMCPを考える
naoto33
0
420
整頓のジレンマとの戦い〜Tidy First?で振り返る事業とキャリアの歩み〜/Fighting the tidiness dilemma〜Business and Career Milestones Reflected on in Tidy First?〜
bitkey
2
14k
Operating Operator
shhnjk
1
510
React開発にStorybookとCopilotを導入して、爆速でUIを編集・確認する方法
yu_kod
1
230
ネットワーク保護はどう変わるのか?re:Inforce 2025最新アップデート解説
tokushun
0
180
Featured
See All Featured
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Speed Design
sergeychernyshev
32
1k
Code Reviewing Like a Champion
maltzj
524
40k
Automating Front-end Workflow
addyosmani
1370
200k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
4 Signs Your Business is Dying
shpigford
184
22k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
BBQ
matthewcrist
89
9.7k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Transcript
None
#PIWNCT Ⰸⱞשקʙ猳猳獑
NGULAR %* εΩ
ࣗݾհ 5[UVGO#TEJKVGEV 鰄鰇鰂鰈鱄鯵鰒 0COG 鱻鲑鱔鲍鲂ㅕ䃩鰰 #IG 5[UVGO#TEJKVGEV ,QD ,CXC 5MKNN
.KMG
"HFOEB 9JCVņU2TQXKFGT! 9JCVņU1RVKQPCN! 9JCVņU+PLGEVCDNG 9JCVņ+PLGEVQT6TGG
8IBU`T1SPWJEFS 9JCVņU2TQXKFGT! 9JCVņU1RVKQPCN! 9JCVņU+PLGEVCDNG 9JCVņ+PLGEVQT6TGG
2TQXKFGTKU !$PNQPOFOU \ QSPWJEFST<)FSP4FSWJDF> ^ FYQPSUDMBTT)FSPFT$PNQPOFOU\^
!/H.PEVMF \ QSPWJEFST< 6TFS4FSWJDF \QSPWJEF"11@$0/'*( VTF7BMVF)&30@%*@$0/'*(^ > ^ FYQPSUDMBTT"QQ.PEVMF\^ TSDBQQBQQNPEVMFUT TSDBQQIFSPFTIFSPFTDPNQPOFOUUT 鰄鰽 鰄鰽
2TQXKFGTKU +PLGEVQT鯽 *19 9*#6 ͲΜͳτʔΫϯͰ ͲͷΑ͏ʹ +PLGEV鰊鰼鯼鰟崎
2TQXKFGTKU +PLGEVQT鯽 *19 9*#6 ͲͷΑ͏ʹ RTQXKFG WUG%NCUU WUG8CNWG WUG(CEVQT[ WUG'ZKUKVPI
OWNVK +PLGEV鰊鰼鯼鰟崎 ͲΜͳτʔΫϯͰ
WUG%NCUU WUG8CNWG WUG(CEVQT[ WUG'ZKUKVPI 2TQXKFGTKU +PLGEVQT鯽 *19 ͲͷΑ͏ʹ OWNVK +PLGEV鰊鰼鯼鰟崎
9*#6 RTQXKFG ͲΜͳτʔΫϯͰ
DMBTT)FMMP4FSWJDF\ IFMMP)FMMPXPSME ^ !$PNQPOFOU \ TFMFDUPSBQQSPPU UFNQMBUF6SMBQQDPNQPOFOUIUNM QSPWJEFST<)FMMP4FSWJDF>
TUZMF6SMT<BQQDPNQPOFOUDTT> ^ FYQPSUDMBTT"QQ$PNQPOFOU\ DPOTUSVDUPS !*OKFDU )FMMP4FSWJDF QSJWBUFIFMMP)FMMP4FSWJDF \^ UJUMFUIJTIFMMPIFMMP ^ BQQDPNQPOFOUUT 5ZQF サービスをコンポーネントにDIする⼀般的な⽅法が上のコードです。 (コンポーネントにサービスのクラスを書くのはѱ⼿ですが、今回は分かりやすさを優先してここに書いています。) コンポーネントデコレータのprovidersにサービス型を定義し、コンストラクタでそのサービスをインジェクトします。
DMBTT)FMMP4FSWJDF\ IFMMP)FMMPXPSME ^ !$PNQPOFOU \ TFMFDUPSBQQSPPU UFNQMBUF6SMBQQDPNQPOFOUIUNM QSPWJEFST<\QSPWJEF)FMMP4FSWJDF
VTF$MBTT)FMMP4FSWJDF^> TUZMF6SMT<BQQDPNQPOFOUDTT> ^ FYQPSUDMBTT"QQ$PNQPOFOU\ DPOTUSVDUPS !*OKFDU )FMMP4FSWJDF QSJWBUFIFMMP)FMMP4FSWJDF \^ UJUMFUIJTIFMMPIFMMP ^ BQQDPNQPOFOUUT 5ZQF 先ほどのproviders定義は、上のコード指定と同じです。 providでHelloServiceの型をインジェクショントークンとして指定し、インスタンスはHelloServiceクラスから作成することを 指定しています。 QSPWJEFST<)FMMP4FSWJDF> ⛭鰉秷鯵
DMBTT)FMMP4FSWJDF\ IFMMP)FMMPXPSME ^ !$PNQPOFOU \ TFMFDUPSBQQSPPU UFNQMBUF6SMBQQDPNQPOFOUIUNM QSPWJEFST<\QSPWJEF)FMMP4FSWJDF
VTF$MBTT)FMMP4FSWJDF^> TUZMF6SMT<BQQDPNQPOFOUDTT> ^ FYQPSUDMBTT"QQ$PNQPOFOU\ DPOTUSVDUPS !*OKFDU )FMMP4FSWJDF QSJWBUFIFMMP)FMMP4FSWJDF \^ UJUMFUIJTIFMMPIFMMP ^ 5ZQF インジェクショントークンとインジェクトする引の型が同じ場合、Injectデコレータによるトークン指定を省略することがで きます。 䧢䡆⛐聚
DMBTT)FMMP4FSWJDF\ IFMMP)FMMPXPSME ^ !$PNQPOFOU \ TFMFDUPSBQQSPPU UFNQMBUF6SMBQQDPNQPOFOUIUNM QSPWJEFST<\QSPWJEF)FMMP4FSWJDF
VTF$MBTT)FMMP4FSWJDF^> TUZMF6SMT<BQQDPNQPOFOUDTT> ^ FYQPSUDMBTT"QQ$PNQPOFOU\ DPOTUSVDUPS !*OKFDU )FMMP4FSWJDF QSJWBUFIFMMP)FMMP4FSWJDF \^ UJUMFUIJTIFMMPIFMMP ^ BOZ providには型以外も指定できます。 例えば、’HelloService’という⽂字列を指定することも出དྷます。 㡨⸸⓸鰘稊
DMBTT)FMMP4FSWJDF\IFMMP)FMMPXPSME^ DMBTT%*TVLJ4FSWJDF\IFMMP%*TVLJXPSME^ !$PNQPOFOU \ TFMFDUPSBQQSPPU UFNQMBUF6SMBQQDPNQPOFOUIUNM QSPWJEFST<\QSPWJEF)FMMP4FSWJDF VTF$MBTT)FMMP4FSWJDF^
\QSPWJEF)FMMP4FSWJDF VTF$MBTT%*TVLJ4FSWJDF^> TUZMF6SMT<BQQDPNQPOFOUDTT> ^ FYQPSUDMBTT"QQ$PNQPOFOU\ DPOTUSVDUPS !*OKFDU )FMMP4FSWJDF QSJWBUFIFMMP)FMMP4FSWJDF !*OKFDU )FMMP4FSWJDF QSJWBUFIFMMP%*TVLJ4FSWJDF \^ UJUMFA\UIJTIFMMPIFMMP^\UIJTIFMMPIFMMP^A ^ BOZ ただ、⽂字列でインジェクショントークンを指定した場合、同じ⽂字列で別の定義があると、定義が上書きされてしまいます。 複プロバイダによるインジェクショントークンの衝突が⼼配です。 上のコードでは、helloมにはHelloServiceではなく、DIsukiServiceのインスタンスがインジェクトされてしまいました。 鰚鰒鰺鰳&+UWMK猳
DMBTT)FMMP4FSWJDF\IFMMP)FMMPXPSME^ DMBTT%*TVLJ4FSWJDF\IFMMP%*TVLJXPSME^ DPOTU)FMMP5PLFOOFX0QBRVF5PLFO )FMMP4FSWJDF DPOTU)FMMP5PLFOOFX0QBRVF5PLFO )FMMP4FSWJDF !$PNQPOFOU \
TFMFDUPSBQQSPPU UFNQMBUF6SMBQQDPNQPOFOUIUNM QSPWJEFST<\QSPWJEF)FMMP5PLFO VTF$MBTT)FMMP4FSWJDF^ \QSPWJEF)FMMP5PLFO VTF$MBTT%*TVLJ4FSWJDF^> TUZMF6SMT<BQQDPNQPOFOUDTT> ^ FYQPSUDMBTT"QQ$PNQPOFOU\ DPOTUSVDUPS !*OKFDU )FMMP5PLFO QSJWBUFIFMMP)FMMP4FSWJDF !*OKFDU )FMMP5PLFO QSJWBUFIFMMP%*TVLJ4FSWJDF \^ UJUMFA\UIJTIFMMPIFMMP^\UIJTIFMMPIFMMP^\)FMMP5PLFO)FMMP5PLFO^A ^ 0QBRVF5PLFO そのような衝突をさけるҝに、⽂字列のトークンではなくOpaqueTokenを⽤います。 OpaqueTokenは同じ⽂字列でも違うものとして認識されます。 *GNNQ6QMGP*GNNQ6QMGP
RTQXKFG ͲΜͳτʔΫϯͰ 9*#6 2TQXKFGTKU +PLGEVQT鯽 +PLGEV鰊鰼鯼鰟崎 *19 OWNVK WUG%NCUU WUG8CNWG
WUG(CEVQT[ WUG'ZKUKVPI ͲͷΑ͏ʹ
DMBTT)FMMP4FSWJDF\ IFMMP)FMMPXPSME ^ !$PNQPOFOU \ TFMFDUPSBQQSPPU UFNQMBUF6SMBQQDPNQPOFOUIUNM QSPWJEFST<\QSPWJEF)FMMP4FSWJDF
VTF$MBTT)FMMP4FSWJDF^> TUZMF6SMT<BQQDPNQPOFOUDTT> ^ FYQPSUDMBTT"QQ$PNQPOFOU\ DPOTUSVDUPS QSJWBUFIFMMP)FMMP4FSWJDF \^ UJUMFUIJTIFMMPIFMMP ^ VTF$MBTT useClassは値としてクラスを受け取り、Injectのたびにそのクラスのインスタンスを作ります。 Injectのたびにຖ回newです。
DMBTT)FMMP4FSWJDF\IFMMP)FMMPXPSME^ DMBTT%*TVLJ4FSWJDF\IFMMP%*TVLJXPSME^ !$PNQPOFOU \ TFMFDUPSBQQSPPU UFNQMBUF6SMBQQDPNQPOFOUIUNM QSPWJEFST<\QSPWJEF)FMMP4FSWJDF VTF$MBTT%*TVLJ4FSWJDF^>
TUZMF6SMT<BQQDPNQPOFOUDTT> ^ FYQPSUDMBTT"QQ$PNQPOFOU\ DPOTUSVDUPS QSJWBUFIFMMP)FMMP4FSWJDF \^ UJUMFUIJTIFMMPIFMMP ^ VTF$MBTT ちなみに、provideで指定したインジェクショントークンと異なる型のクラスを指定することも出དྷます。 ただし、不必要に混ཚを招くため、このような使⽤⽅法は避けたほうがいいでしょう。 䡑鰛鰼⩬猳猳獑
DMBTT)FMMP4FSWJDF\IFMMP)FMMPXPSME^ DMBTT%*TVLJ4FSWJDFFYUFOET)FMMP4FSWJDF\IFMMP%*TVLJXPSME^ !$PNQPOFOU \ TFMFDUPSBQQSPPU UFNQMBUF6SMBQQDPNQPOFOUIUNM QSPWJEFST<\QSPWJEF)FMMP4FSWJDF VTF$MBTT%*TVLJ4FSWJDF^>
TUZMF6SMT<BQQDPNQPOFOUDTT> ^ FYQPSUDMBTT"QQ$PNQPOFOU\ DPOTUSVDUPS QSJWBUFIFMMP)FMMP4FSWJDF \^ UJUMFUIJTIFMMPIFMMP ^ VTF$MBTT インジェクショントークンの型をܧ承したクラスをuseClassに指定するなどの使⽤⽅法は、型として互換があるので問題ないと 思います。 ⩬鰙鰈鰗ⅳ稰鯽鯳鰼
DMBTT)FMMP4FSWJDF\ DPOTUSVDUPS QSJWBUFOBNFTUSJOH \^ IFMMPA)FMMP\UIJTOBNF^A ^ MFUIFMMP"OHVMBSOFX)FMMP4FSWJDF "OHVMBS !$PNQPOFOU
\ TFMFDUPSBQQSPPU UFNQMBUF6SMBQQDPNQPOFOUIUNM QSPWJEFST<\QSPWJEF)FMMP4FSWJDF VTF7BMVFIFMMP"OHVMBS^> TUZMF6SMT<BQQDPNQPOFOUDTT> ^ FYQPSUDMBTT"QQ$PNQPOFOU\ DPOTUSVDUPS QSJWBUFIFMMP)FMMP4FSWJDF \^ UJUMFUIJTIFMMPIFMMP ^ VTF7BMVF useValueは値としてオブジェクトを受け取り、Injectされるたびにそのࢀ照を渡します。 定のように使えますが、ࢀ照が渡ってくるのでDIされたオブジェクトをม更すると、別の箇所に影響しますので注意が必要で す。 餿䑈鱃䄂鰊
DMBTT)FMMP4FSWJDF\ DPOTUSVDUPS QSJWBUFOBNFTUSJOH \^ IFMMPA)FMMP\UIJTOBNF^A ^ !$PNQPOFOU \ TFMFDUPSBQQSPPU
UFNQMBUF6SMBQQDPNQPOFOUIUNM QSPWJEFST<\QSPWJEF)FMMP4FSWJDF VTF'BDUPSZ OFX)FMMP4FSWJDF "OHVMBS ^> TUZMF6SMT<BQQDPNQPOFOUDTT> ^ FYQPSUDMBTT"QQ$PNQPOFOU\ DPOTUSVDUPS QSJWBUFIFMMP)FMMP4FSWJDF \^ UJUMFUIJTIFMMPIFMMP ^ VTF'BDUPSZ useFactoryの値にはؔを渡します。Injectされるたびにؔが࣮⾏され、そのり値が注⼊されます。 環境によって異なるインスタンスを⽣成したい場合などに、useFactoryを使⽤します。
DMBTT)FMMP4FSWJDF\ DPOTUSVDUPS QSJWBUFOBNFTUSJOH \^ IFMMPA)FMMP\UIJTOBNF^A ^ !$PNQPOFOU \ TFMFDUPSBQQSPPU
UFNQMBUF6SMBQQDPNQPOFOUIUNM QSPWJEFST<\QSPWJEF)FMMP4FSWJDF VTF'BDUPSZ OFX)FMMP4FSWJDF "OHVMBS ^> TUZMF6SMT<BQQDPNQPOFOUDTT> ^ FYQPSUDMBTT"QQ$PNQPOFOU\ DPOTUSVDUPS QSJWBUFIFMMP)FMMP4FSWJDF \^ UJUMFUIJTIFMMPIFMMP ^ VTF'BDUPSZ @armorik83 さんから勉ڧձでご指摘頂きました。ありがとうございます! exportしていないクラスやアローؔ式のFactoryはAoTコンパイルでエラーとなります。 ؾをつけましょう! FYQPSUDMBTT)FMMP4FSWJDF\ DPOTUSVDUPS QSJWBUFOBNFTUSJOH \^ IFMMPA)FMMP\UIJTOBNF^A ^ FYQPSUGVODUJPO)FMMP4FSWJDF'BDUPSZ \ SFUVSOOFX)FMMP4FSWJDF "OHVMBS ^ !$PNQPOFOU \ TFMFDUPSBQQSPPU UFNQMBUF6SMBQQDPNQPOFOUIUNM QSPWJEFST<\QSPWJEF)FMMP4FSWJDF VTF'BDUPSZ)FMMP4FSWJDF'BDUPSZ^> TUZMF6SMT<BQQDPNQPOFOUDTT> ^ GZRQTV鰈鰗鯵鰛鯵鱓鲍鱝鰠#Q6鱗鲗鱵鱈鲏鰘鱌鲍鯮 鱆鲑鯮鏈窚ㇰ鰳#Q6鱗鲗鱵鱈鲏鰘鱌鲍鯮 鰄鰟鰹鯷鰜㧙鰀鰙 鱗鲗鱵鱈鲏蒌鰼
DMBTT)FMMP4FSWJDF\ DPOTUSVDUPS QSJWBUFOBNFTUSJOH \^ IFMMPA)FMMP\UIJTOBNF^A ^ DPOTU)FMMP/BNFOFX0QBRVF5PLFO OBNF !$PNQPOFOU
\ TFMFDUPSBQQSPPU UFNQMBUF6SMBQQDPNQPOFOUIUNM QSPWJEFST<\QSPWJEF)FMMP/BNF VTF7BMVFOHLZPUP^ \QSPWJEF)FMMP4FSWJDF VTF'BDUPSZ OBNFTUSJOH OFX)FMMP4FSWJDF OBNF EFQT<)FMMP/BNF>^> TUZMF6SMT<BQQDPNQPOFOUDTT> ^ FYQPSUDMBTT"QQ$PNQPOFOU\ DPOTUSVDUPS QSJWBUFIFMMP)FMMP4FSWJDF \^ UJUMFUIJTIFMMPIFMMP ^ VTF'BDUPSZ useFactoryを⽤いる場合、depsでインジェクショントークンを指定することが出དྷます。 depsでインジェクショントークンを指定すると、useFactoryのؔにインジェクトした引を渡すことが出དྷます。
DMBTT)FMMP4FSWJDF\ DPOTUSVDUPS QSJWBUFOBNFTUSJOH \^ IFMMPA)FMMP\UIJTOBNF^A ^ !$PNQPOFOU \ TFMFDUPSBQQSPPU
UFNQMBUF6SMBQQDPNQPOFOUIUNM QSPWJEFST<\QSPWJEF)FMMP4FSWJDF VTF'BDUPSZ OFX)FMMP4FSWJDF "OHVMBS ^ \QSPWJEF)FMMP"OHVMBS VTF&YJTUJOH)FMMP4FSWJDF^> TUZMF6SMT<BQQDPNQPOFOUDTT> ^ FYQPSUDMBTT"QQ$PNQPOFOU\ DPOTUSVDUPS !*OKFDU )FMMP"OHVMBS QSJWBUFIFMMP)FMMP4FSWJDF \^ UJUMFUIJTIFMMPIFMMP ^ VTF&YJTUJOH useExistingは値としてインジェクショントークンをとり、それにରするエイリアスを作ります。 つまり異なるインジェクショントークンで同じインスタンスが得られるようになります。 useClassとはਅ逆で、⼀切newしません。 上のコード例の場合、’HelloAngular’の⽂字列トークンでもHelloServiceのインスタンスを得ることが出དྷています。 ┆痓鱃∽㓱
DMBTT)FMMP4FSWJDF\IFMMP)FMMPXPSME^ DMBTT%*TVLJ4FSWJDF\IFMMP%*TVLJXPSME^ !$PNQPOFOU \ TFMFDUPSBQQSPPU UFNQMBUF6SMBQQDPNQPOFOUIUNM QSPWJEFST<\QSPWJEF)FMMP4FSWJDF VTF$MBTT)FMMP4FSWJDF
NVMUJUSVF^ \QSPWJEF)FMMP4FSWJDF VTF$MBTT%*TVLJ4FSWJDF NVMUJUSVF^> TUZMF6SMT<BQQDPNQPOFOUDTT> ^ FYQPSUDMBTT"QQ$PNQPOFOU\ DPOTUSVDUPS !*OKFDU )FMMP4FSWJDF QSJWBUFIFMMP\IFMMPTUSJOH^<> \^ UJUMFA\UIJTIFMMP NBQ PPIFMMP SFEVDF N N N N ^A ^ NVMUJ 通常は同じインジェクショントークンにରして複Providerを宣⾔すると、最後に宣⾔されたものに上書きされますが、multiを trueに指定すると、インジェクショントークンにରして複のProviderを提供することが出དྷます。 この場合、インジェクトされるมの型は配列にします。 苭窚鰛鰟鰘蔥⓸
8IBU`T0QUJPOBM 9JCVņU2TQXKFGT! 9JCVņU+PLGEVCDNG 9JCVņ+PLGEVQT6TGG 9JCVņU1RVKQPCN!
DMBTT)FMMP4FSWJDF\ IFMMP)FMMPXPSME ^ !$PNQPOFOU \ TFMFDUPSBQQSPPU UFNQMBUF6SMBQQDPNQPOFOUIUNM QSPWJEFST<\QSPWJEF)FMMP4FSWJDF
VTF$MBTT)FMMP4FSWJDF^> TUZMF6SMT<BQQDPNQPOFOUDTT> ^ FYQPSUDMBTT"QQ$PNQPOFOU\ DPOTUSVDUPS !*OKFDU "OHVMBS4FSWJDF QSJWBUFIFMMP)FMMP4FSWJDF \^ UJUMFUIJTIFMMPOVMM UIJTIFMMPIFMMPOVMM ^ 0QUJPOBM 依存性解決出དྷなかった場合、DIエラーとなってしまいます。 上のコードの場合、’AngularService’という⽂字列のインジェクショントークンで依存性が解決出དྷなかったので、エラーがൃ ⽣します。 㨋劊鰟鱬鯮鱓鲗
DMBTT)FMMP4FSWJDF\ IFMMP)FMMPXPSME ^ !$PNQPOFOU \ TFMFDUPSBQQSPPU UFNQMBUF6SMBQQDPNQPOFOUIUNM QSPWJEFST<\QSPWJEF)FMMP4FSWJDF
VTF$MBTT)FMMP4FSWJDF^> TUZMF6SMT<BQQDPNQPOFOUDTT> ^ FYQPSUDMBTT"QQ$PNQPOFOU\ DPOTUSVDUPS !0QUJPOBM !*OKFDU "OHVMBS4FSWJDF QSJWBUFIFMMP)FMMP4FSWJDF \^ UJUMFUIJTIFMMPOVMM UIJTIFMMPIFMMPOVMM ^ 0QUJPOBM 依存性解決出དྷなかった場合にもエラーにしたくない場合は、Optionalデコレータで指定します。 こうすることで、依存性解決出དྷなかったมの値がnullとなるだけで、エラーはൃ⽣しません。 VJKUJGNNQ鰟甧鰠PWNN
8IBU`T0QUJPOBM 9JCVņU2TQXKFGT! 9JCVņ+PLGEVQT6TGG 9JCVņU+PLGEVCDNG 9JCVņU1RVKQPCN!
DMBTT8IP\OBNF"OHVMBS^ DMBTT)FMMP4FSWJDF\ DPOTUSVDUPS QSJWBUFXIP8IP \^ IFMMPA)FMMP\UIJTXIPOBNF^A ^ !$PNQPOFOU \ TFMFDUPSBQQSPPU
UFNQMBUF6SMBQQDPNQPOFOUIUNM QSPWJEFST<8IP )FMMP4FSWJDF> TUZMF6SMT<BQQDPNQPOFOUDTT> ^ FYQPSUDMBTT"QQ$PNQPOFOU\ DPOTUSVDUPS QSJWBUFIFMMP)FMMP4FSWJDF \^ UJUMFUIJTIFMMPIFMMP ^ *OKFDUBCMF サービスもDIにより依存性を解決出དྷますが、上のコードはエラーとなります。 理由としては、Injectorで依存性解決可能なクラスとして認識されていないからです。 鱵鲍鲅鯮鱣鱃茭㽛鰘鯾鰛鯵猳
!*OKFDUBCMF DMBTT8IP\OBNF"OHVMBS^ !*OKFDUBCMF DMBTT)FMMP4FSWJDF\ DPOTUSVDUPS QSJWBUFXIP8IP \^ IFMMPA)FMMP\UIJTXIPOBNF^A
^ !$PNQPOFOU \ TFMFDUPSBQQSPPU UFNQMBUF6SMBQQDPNQPOFOUIUNM QSPWJEFST<8IP )FMMP4FSWJDF> TUZMF6SMT<BQQDPNQPOFOUDTT> ^ FYQPSUDMBTT"QQ$PNQPOFOU\ DPOTUSVDUPS QSJWBUFIFMMP)FMMP4FSWJDF \^ UJUMFUIJTIFMMPIFMMP ^ *OKFDUBCMF サービスも依存性解決ର象にしたい場合は、Injectableデコレータを指定します。 Angularでは、すべてのサービスにInjectableデコレータを指定するスタイルが推されています。 なお、ComponentでInjectableが必要なかった理由は、ComponentやDirective、Pipeは、Injactableのサブタイプだからで す。
8IBU`T0QUJPOBM 9JCVņU2TQXKFGT! 9JCVņU1RVKQPCN! 9JCVņU+PLGEVCDNG 9JCVņ+PLGEVQT6TGG
*OKFDUPS5SFF ∼Rangle's Angular Training Book [The Injector Tree] よりൈਮ∼ AngularのInjectorはコンポーネントツリーとฒ⾏してツ
リーを形成します。 Injectorはすべてのコンポーネントຖに作成されるわけでは なく、デコレータでprovidersが指定されたコンポーネント ຖに作成され、Injector Treeを形成します。 コンポーネントは⾃分⾃⾝、もしくは⾃分の親のコンポーネ ントのInjectorをたどることで、依存性解決を解決します。 Injectorຖにインスタンスはシングルトンなので、その⼦コ ンポーネントは親と同じインスタンスをࢀ照します。
·ͱΊ 9JCVņU2TQXKFGT! 9JCVņU1RVKQPCN! 9JCVņU+PLGEVCDNG 9JCVņ+PLGEVQT6TGG ͍ΖΜͳϑϨϯζ͕͍ΔΑʂΘʙ͍ʂͨͷ͠ʙ͍ʂʂ (((ο( ƅ˜ƅ*)ο)))
5IBOLZPVBMM GPSMJTUFOJOH (((ο( ƅ˜ƅ*)ο)))