Zenn
Open3

AngularでObservableを使う

hashitohashito

Observableの生成について

Observable.createは非推奨になったらしい。

return Observable.create(o=>setInterval(_=>o.next("hi"),100))

下記のようにnewするのが推奨らしい

return new Observable(o=>setInterval(_=>o.next("hi"),100))
hashitohashito

ObservableのHTMLへの反映

asyncパイプというものがあるらしい。
これを利用するとObservable をクラスのプロパティから直接HTML内で利用できるらしい。

利用方法

{{uploadPercent | async}}的にObservable<number>を埋め込むでことができる。

AngularFireStorage
https://github.com/angular/angularfire/blob/master/docs/storage/storage.md
→コード参考

@Component({
  selector: 'app-root',
  template: `
    <input type="file" (change)="uploadFile($event)" />
    <div>{{ uploadPercent | async }}</div>
    <a [href]="downloadURL | async">{{ downloadURL | async }}</a>
 `
})
export class AppComponent {
  uploadPercent: Observable<number>;
  downloadURL: Observable<string>;
  constructor(private storage: AngularFireStorage) {}
  uploadFile(event) {
    const file = event.target.files[0];
    const filePath = 'name-your-file-path-here';
    const fileRef = this.storage.ref(filePath);
    const task = this.storage.upload(filePath, file);

    // observe percentage changes
    this.uploadPercent = task.percentageChanges();
    // get notified when the download URL is available
    task.snapshotChanges().pipe(
        finalize(() => this.downloadURL = fileRef.getDownloadURL() )
     )
    .subscribe()
  }
}