質問: ### 前提・実現したいこと ~~サーバサイド: Spring Boot~~(フロント側で完結する質問なので関係ないかと思います) フロントエンド: Angular5 ユーザアイコン機能を実装しています。 ユーザ設定画面にて画像アップロード後に画面のリロードをせずにツールバーに表示されているユーザアイコンを切り替えたいです。 詳細は以下の通りです。ご教授よろしくお願いします。 ### 発生している問題・エラーメッセージ アイコンのアップロードは完了しており、エラーは出ていません。 アップロードされたファイルはサーバ側の`resource\image`フォルダに保存されています。 一方クライアント側では以下のようにimgタグで呼び出しています(`authService.userdetail.iconUrl`はアイコン取得用のAPIのURL)。 ``` ``` また、画面遷移はすべてRouterクラスのnavigateメソッドを使っているため、画面のリロードは行っておらず、ツールバーは全画面共通で固定されています。 この場合、もう一度ログインしなおすか画面をリロードするまでツールバーのアイコンの表示が変わりません。 何か対処方法はあるのでしょうか。 ### 該当のソースコード 以下がツールバーのソースになります。 ``` menu {{ authService.userdetail.lastName + authService.userdetail.firstName }} ユーザ設定 ログアウト ``` また、以下は一例ですが、画面遷移は以下の通りです。 ``` constructor(private router: Router){} toTop() { this.router.navigate(["/top"]); } ``` アイコンアップロードについてはユーザ設定画面でダイアログを開いた後、ダイアログでファイル選択後アップロードボタンを押すことで、アイコンをアップロードできます。アップロード後ダイアログは閉じるようになっています。 ### 試したこと * 画面遷移の度にモデル`UserDetail`を取り直す。 モデルにアイコン取得用APIのURLを入れているので、モデルのインスタンスを生成しなおすことで表示も切り替わると考えました。しかし、名前等の入力項目は表示が変わったのですが、アイコンの表示は変わりませんでした。 * 画像アップロード後にリロードする。 ダイアログを閉じた後、画面をリロードするようにしたのですが、UIがとても変な感じになってしまいました(他ではリロードされないのにそこだけリロードされるので)。綺麗なUIならこの手法でもいいと思っていますので、何かやり方があるならご教授よろしくお願いします。 ### 質問事項のまとめ 質問事項がバラついてしまったので、まとめたいと思います。 1. 画面のリロードを行わずに画像呼び出しを再度行うことは可能でしょうか。可能でしたら方法が知りたいです。 2. 画像アップロード時の仕様としてリロードしても違和感のないUIを実現するためにはどのようにすればいいでしょうか。 1が可能であれば方法をご教授ください。不可能であれば2を教えて頂きたく思います。 以上、よろしくお願いします。
回答: 先ほど追記・修正依頼で記載したものです。 根本的には、img srcにセットされる値が変更されないため、angularのウォッチ式が動かずに変更を検知できておらず、imgの画像を再取得しに行っていないのが原因。となるかと思います。 そこで、追記・修正依頼に記載した策を試みてもらったのですが、これはあくまで原因切り分けのための方法ということで、根本対応としては少しイマイチな気もします。 (理由は、今後対象コードをあなた以外の人がメンテしたときに、「なぜ一度nullをセットしているのか?」がわからないためです) 簡単にググったのですが、下記SOの回答の方がいいかなと思いました。 https://stackoverflow.com/questions/18845298/forcing-a-ng-src-reload 正直こちらも完璧にしっくりくる解決策ではないのですが(回答者の方もあくまで"workaround"といっています)、まだこちらの方がコードから意図が汲み取りやすいと思います。 上記回答を利用する場合には、authService.userdetail.iconUrlで利用するAPI側の人と相談して、影響のないパラメーターをセットしてくださいね。 と、まぁ上記が教科書的な対応と思いますが、私が追記・修正依頼に記載した策でもまぁいいとは思います(ちゃんとコメントに残すのが最低条件ですが)。あとは工数と求める品質とで調整して決めてもらえればと思います。