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.3k
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
2k
Ionic React でサービス開発したお話
kozake
0
120
ドキッ!失敗だらけのシステム開発
kozake
1
770
やはり俺のWeb APIは間違えている
kozake
0
510
すごい大規模 たのしく作ろう
kozake
4
2.4k
KHipster ~JHipsterで始めるKotlin Web プログラミング~
kozake
0
840
Docker with JHipster
kozake
1
540
実践JHipster #jsug #sf_36
kozake
2
7.6k
Ionicでアプリ作ったよ!開発方法の紹介
kozake
2
970
Other Decks in Technology
See All in Technology
スキルだけでは満たせない、 “組織全体に”なじむオンボーディング/Onboarding that fits “throughout the organization” and cannot be satisfied by skills alone
bitkey
0
180
1行のコードから社会課題の解決へ: EMの探究、事業・技術・組織を紡ぐ実践知 / EM Conf 2025
9ma3r
11
3.8k
EDRの検知の仕組みと検知回避について
chayakonanaika
12
4.9k
データベースの負荷を紐解く/untangle-the-database-load
emiki
2
510
Apache Iceberg Case Study in LY Corporation
lycorptech_jp
PRO
0
320
Pwned Labsのすゝめ
ken5scal
2
430
Fraxinus00tw assembly manual
fukumay
0
100
Share my, our lessons from the road to re:Invent
naospon
0
140
【Findy】「正しく」失敗できる チームの作り方 〜リアルな事例から紐解く失敗を恐れない組織とは〜 / A team that can fail correctly by findy
i35_267
5
880
"TEAM"を導入したら最高のエンジニア"Team"を実現できた / Deploying "TEAM" and Building the Best Engineering "Team"
yuj1osm
1
170
設計を積み重ねてシステムを刷新する
sansantech
PRO
0
160
エンジニアリング価値を黒字化する バリューベース戦略を用いた 技術戦略策定の道のり
kzkmaeda
6
2.7k
Featured
See All Featured
Designing for Performance
lara
604
68k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3k
Side Projects
sachag
452
42k
Code Review Best Practice
trishagee
67
18k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
How to train your dragon (web standard)
notwaldorf
91
5.9k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Git: the NoSQL Database
bkeepers
PRO
427
65k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
114
50k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
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 (((ο( ƅ˜ƅ*)ο)))