イメージをリロードせずに角度を変更する2/4

Question

ページをリロードすることなく角度を変えてイメージを変更するにはどうすればよいですか？私はいくつかのユーザーを持っており、ユーザーのあらゆる変化にもイメージの変化があります。今、私は実際に画像の変更を見るためにページをリロードする必要があります。もはやそれをリロードする方法はありませんか？

TS

private image1 = `assets/images/image${localStorage.getItem('user_id')}.jpg`; 

HTML

<img [src]="image1"> 

選択user.ts

onSelectUser(form: NgForm) { 
    const user = form.value.org; 
    this.userService.selectedUser(user) 
     .subscribe(
      data => { 
      console.log(data); 
      localStorage.setItem('user_id', data.user.id); 

      }, 
      error => { 
      console.log(error); 
      }); 
    } 

Answer 1

画像の読み込みをトリガする単純な方法は、setTimeoutと、例えば、srcトリガ変化検出を再割り当てすることである。

もちろん

this.userService.selectedUser(user) 
    .subscribe(
     data => { 
     localStorage.setItem('user_id', data.user.id); 
     this.image1 = ''; 
     setTimeout(() => { 
      this.image1 = '...jpg'; 
     }); 

     }, 
     ... 

、これはキャッシュに依存します。イメージのURLが同じで、サーバーキャッシュポリシーによってキャッシュされることが許可されている場合（通常はイメージに適用されます）、キャッシュから読み込まれます。この場合、jQueryがAJAX要求に対してどのように動作するかと同様に、ブラウザのキャッシュをURL変更で破棄する必要があります。 （通常、これは問題ではありません）、サーバがURLにクエリ文字列を追加する要求にOKであることを考慮

が、それは単にです：あなたはimage1` `の値を変更しない

this.userService.selectedUser(user) 
    .subscribe(
     data => { 
     localStorage.setItem('user_id', data.user.id); 
     this.image1 = '...jpg?_=' + Date.now(); 
     }, 
     ...