前提・実現したいこと
サーバサイド: Spring Boot(フロント側で完結する質問なので関係ないかと思います)
フロントエンド: Angular5
ユーザアイコン機能を実装しています。
ユーザ設定画面にて画像アップロード後に画面のリロードをせずにツールバーに表示されているユーザアイコンを切り替えたいです。
詳細は以下の通りです。ご教授よろしくお願いします。
発生している問題・エラーメッセージ
アイコンのアップロードは完了しており、エラーは出ていません。
アップロードされたファイルはサーバ側のresource\image
フォルダに保存されています。
一方クライアント側では以下のようにimgタグで呼び出しています(authService.userdetail.iconUrl
はアイコン取得用のAPIのURL)。
html
1<img [src]="authService.userdetail.iconUrl" class="account_icon" />
また、画面遷移はすべてRouterクラスのnavigateメソッドを使っているため、画面のリロードは行っておらず、ツールバーは全画面共通で固定されています。
この場合、もう一度ログインしなおすか画面をリロードするまでツールバーのアイコンの表示が変わりません。
何か対処方法はあるのでしょうか。
該当のソースコード
以下がツールバーのソースになります。
html
1<mat-toolbar class="toolbar"> 2 <button mat-icon-button class="menu_button" (click)="sidenav.toggle()"> 3 <mat-icon>menu</mat-icon> 4 </button> 5 <img id="logo" src="../assets/image/logo.png" (click)="nav.toTop()"> 6 <button mat-button [matMenuTriggerFor]="menu"> 7 <img *ngIf="!authService.isUserEmpty()" [src]="authService.userdetail.iconUrl" class="account_icon" /> {{ authService.userdetail.lastName + authService.userdetail.firstName }} 8 </button> 9 <mat-menu #menu="matMenu"> 10 <button mat-menu-item (click)="nav.toMySetting()">ユーザ設定</button> 11 <button mat-menu-item (click)="logout()">ログアウト</button> 12 </mat-menu> 13</mat-toolbar>
また、以下は一例ですが、画面遷移は以下の通りです。
typescript
1constructor(private router: Router){} 2 3toTop() { 4 this.router.navigate(["/top"]); 5}
アイコンアップロードについてはユーザ設定画面でダイアログを開いた後、ダイアログでファイル選択後アップロードボタンを押すことで、アイコンをアップロードできます。アップロード後ダイアログは閉じるようになっています。
試したこと
- 画面遷移の度にモデル
UserDetail
を取り直す。
モデルにアイコン取得用APIのURLを入れているので、モデルのインスタンスを生成しなおすことで表示も切り替わると考えました。しかし、名前等の入力項目は表示が変わったのですが、アイコンの表示は変わりませんでした。
- 画像アップロード後にリロードする。
ダイアログを閉じた後、画面をリロードするようにしたのですが、UIがとても変な感じになってしまいました(他ではリロードされないのにそこだけリロードされるので)。綺麗なUIならこの手法でもいいと思っていますので、何かやり方があるならご教授よろしくお願いします。
質問事項のまとめ
質問事項がバラついてしまったので、まとめたいと思います。
- 画面のリロードを行わずに画像呼び出しを再度行うことは可能でしょうか。可能でしたら方法が知りたいです。
- 画像アップロード時の仕様としてリロードしても違和感のないUIを実現するためにはどのようにすればいいでしょうか。
1が可能であれば方法をご教授ください。不可能であれば2を教えて頂きたく思います。
以上、よろしくお願いします。
回答1件
あなたの回答
tips
プレビュー