Usando íon-img esperando para url chave?

Estou querendo usar íon-slides com íon-img para produzir uma galeria desde que eu estou pensando, pode haver um justo não das imagens. íon-img iónico 4 utiliza carregamento lento para buscar as imagens que eu acho que é o que eu quero.

Estou buscando imagens de uma Azure storage conta de que precisa ter uma dinâmica (expirando) chave adicionado a ele quando o url é obtido.

Eu consegui fazer esse trabalho muito bem, como se segue, aqui o html:

  <ion-slides #photoslider [options]="sliderOptions"
  (ionSlideDidChange)="checkKeyandFixText()"
  (ionSlidesDidLoad)="checkKeyandFixText()">
    <ion-slide *ngFor="let i of userService.user.Images">
        <ion-img cache="true" width="50%%" [src]="i.ImageUrl + validKey"></ion-img>
    </ion-slide>
  </ion-slides>

que verifica a chave (e corrige um índice para o texto usar com cada carga ou mudança de imagem). Verificação da chave de função é este:

  checkKeyandFixText() {
    console.log(this.validKey);
    this.userService.getStorageURLKey('').then(() => { // trigger key update
      console.log(this.validKey);
    });
    .... more irrelevant stuff
  }

o 'validKey" utilizados no html é atualizado pelo " getStorageURLKey função, porque esta função aciona o serviço que obtém a chave e atualizações de um observável, o que é configurado no ngOnInit - parte de que inclui:

   this.azureKey$ = this.userService.azurekey$.subscribe((res) => {
      this.validKey = res.Key;
   });

Mas este não é confiável, dependendo do estado da chave e todos os tipos de assíncrono de temporização possibilidades.

Sua sido um pouco de uma estrada para aqui, afirmando com a idéia de que escrever o 'getStorageURLKey' função de trabalho, fornecendo o url, é verificar se a chave atual é válido ou não, então se não ficar, e adicioná-lo de volta. Essa função por necessidade retorna uma Promessa que o íon-img parece incapaz de lidar com. (Aqui é a função para a integralidade:

        async getStorageURLKey(url: string): Promise<string> {
        const nowplus5 =  addMinutes(Date.now(), 5); // 5 mins to give some leeway
        console.log(nowplus5);
        console.log(url);
        console.log(this.azurekey);
        if (!this.azurekey || isBefore( this.azurekey.Expires, nowplus5 )) {
          console.log('Getting new Key');
          const keyObj = await this.getAzureKeyServer().toPromise();
          await this.saveAzureKeyStore(keyObj);
          this.azurekey = keyObj;
          console.log(this.azurekey);
          return url + keyObj.Key; // Return the url with the new Key or just the key if url is blank
        } else {
          console.log('Key is valid till ' + this.azurekey.Expires);
          console.log(this.azurekey.Key);
          const rval = Promise.resolve(url + this.azurekey.Key);
          return rval ; // Key is in time so return it with url
        }
      }

Se eu apenas chamar a função a partir de dentro do html:

    <ion-img cache="true" width="50%%" [src]="userService.getStorageURLKey(i.ImageURL) "></ion-img>

ele apenas loops para sempre devido a angulars repetição de eventos e loops. Se eu canalizar o resultado de async:

    <ion-img cache="true" width="50%%" [src]="userService.getStorageURLKey(i.ImageURL) | async "></ion-img>

Em seguida, ciclos sobre as imagens, o requisito do nº de vezes, mas não fazer mais nada... às vezes, então, às vezes, parece fazer a diferença e loops para sempre.

Eu também tentei adicionar as minhas próprias tubo em vez de assíncrona, mas o valor de entrada sempre vem na forma de 'não'. Alterar o html apenas para referência "que eu.ImageURl | urkKey", aqui está a tubulação eu tentei:

@Pipe({
  name: 'urlKey'
})
export class URLKeyPipe implements PipeTransform {

  userService: UserService;

  transform(value: string): any {
    console.log('At Pipe');
    console.log(value);
    this.userService.getStorageURLKey(value).then((key) => {
      console.log(key);
      return key;
    });
  }
}

Eu tentei um monte de coisas...:-s

Fundamentalmente, eu preciso adicionar um um assíncrono chave para um assíncrono url e parecem ser repetido até angular. Estou approching isso de forma errada, ou eu deveria apenas ir tente usar plain old img em vez disso? Qualquer idéias? Obrigado antecipadamente.

0
2019-09-17 12:38:34
origem
0 respostas

Veja mais perguntas por marcas