Angularで「ロード中」を簡単に実現する方法を探していて、 Angular Materialにあるんですね。<mat-spinner></mat-spinner>だけ。凄く簡単。 でも、実際にやってみても出て来なかったので不思議でした。 いや、sampleとかいくら見ても、特に何もimportしなくてもいきなりtag書くだけで使えるよ、っていうんですけど、自分のには出て来ません。なぜ?? 動画見てやっとわかりました。 確かに当該component fileではimportの必要ありませんけど、 app.module.tsなりでMatProgressSpinnerModuleのimport/importsが必要なんですね。 もし入ってなければBrowserAnimationsModuleも。 sampleはdefaultでMat系Module全部入りだからよくわかんなかったんですよ。

ある時、JHipsterのAngularのUser Managementを久し振りに見てみると、user名など表示されるのが物凄く遅いことがありました。ポツ、また数秒してポツ、という具合に一つ一つの行が表示されていきます。あれぇ? こんなもんだったかなぁ? あまり気にしなかったのですが、流石に新規Userを作成しようとして失敗する段になって、これは何とかしなければと思い始めました。browserでF12を押してみると、どうやらDate Pipeでのparseに失敗している様子。どうして? 前は出来てたのに。serverから来ているJSONをよく見ると、DBからのDateTime部分のObjectがepochSecondとかnano何とかになっていました。検索すると、 Efficient way to have Jackson serialize Java 8 Instant as epoch milliseconds?を見付けて、中身読んでないですが「jackson-datatype-jsr310」を見掛けてあぁー!っと。

jhipsterで新規application作ってそのbuild.gradle見てみると、確かにありましたcompile 'com.fasterxml.jackson.datatype:jackson-datatype-jsr310'。 これを、なくてもいいじゃん、と大分前に取っちゃってたんですね。確かにWebアプリ本体には影響なかったので気付きませんでした。あーあ。こういう影響が出てくるですか。なるほど。

Angularを書いていて、 Type 'string' is not assignable to type 'number'.と言われて驚いたので調べました。 えー、そのくらいよしなに変換してくれるんじゃないのー?! 結構型に厳しいんですね。 Typescript, toFixed. Type 'string' is not assignable to type 'number'に(12.32).toFixed(2)とあるので試すとその通りでした。 この2ってなんだろう? と思ったら、「小数点以下第2位までの表示(第3位で四捨五入、無ければ0埋め)」ってことなんですね。

Angularでcomponent間通信しようと思いました。 これまで一つにしていたcontrol formとそれをはんえいするimage viewを 別componentにして、その間で情報伝達したり、 あるtimingで他方のfunctionを叩いたり、 とかしたくなるわけですね。 コンポーネント間のデータ授受メモとかAngular2でComponentをまたがったデータのやり取りとかコンポーネント間でデータを共有するとかちょっと調べればもう色々書いてあって、 親子だとどうとか兄弟間だとこうとかあるわけです。 今回は兄弟間だったので間を取り持つService作って兄から書いて弟で読むとかその逆とかやってたんですが、 ngx-storeの@SharedStorage使えば一発ですよそんなの。 最初から知ってればもっともっと簡単に済んだのに。 JHipsterでは ngx-webstorageが 予め入っているのでこれを使えればいいんでしょうけど、 this.$sessionStorage.store('key', 'value')して this.$sessionStorage.retrieve('key')取り出すというように、 ngx-storeと比べてちょっと面倒です。 っていうか、JHipsterでもngx-store使ってくれればよかったのに。 Local Storageにも保存できますし、ってそれはどちらも同じですが、 ngx-storeの方は特にstore/retrieveとかしなくても、 意識しなくても変数に@SharedStorageとか@LocalStorageとすれば 他のcomponentでも変更された値がそのまま参照できるというスグレモノです。 全部これ使えばいーんですよ。

Angularでloggingをしようと思いました。 slf4j(Simple Logging Facade 4 Java)みたいなのないかなー、って思ってng2-logger使いました。 まぁ良かったんですけど、 logのlevel指定が、 指定level以下、とかではなく、 それぞれ指定しなくてはならないというのがちょっと不便です。 何でそんな設計にしたのかなー。 例えば、Log.create('books', Level.WARN)とすればLevel.ERRORも 出てくるというわけではなく、明示的にそれぞれ Log.create('books', Level.ERROR, Level.WARN)と指定しなくてはならない、 というわけです。 Log.setProductionMode()で全てのlogは出て来なくなります。 これは、階層関係なくどこかに1箇所書いてあれば効くようです。 使う時はフツーにlog.d('object',obj)とi、wですが、 errorだけはlog.er('object',obj)なので注意です。 あと出てくるlogの見た目はcolorfulできれいです。