Перезапустите или повторно запустите компонент в Svelte - PullRequest
Новая
       8

Перезапустите или повторно запустите компонент в Svelte

1 голос
/ 29 сентября 2019

Существует ли простой способ принудительного перезапуска компонентов Svelte на месте?

Перезапуск вариантов использования:

  • Очистить список файлов ввода HTML-файлов (вы не можете сбросить путь/ значение)
  • Свертывание выпадающего меню на панели навигации после выбора элемента при использовании наведения мыши

Возможно, есть и другие решения, кроме перезапуска, но здесь можно использовать перезапуск компонента.

Ниже кода перезапуска, который отлично подходит для варианта использования загрузки:

SomeApp.svelte 

<script>
  ...
  import Upload from "./upload/Upload.svelte";

  export let uid;  // firebase uid from auth

  // restart the Upload component after the upload 
  // to clear the filename of the <input type="file" ..../>  
  // restart by making use of a dynamic (falsy) component
  let upload_component = Upload;
  let restart = false;

  $: if (restart) {
     // use a falsy to stop / destroy this component 
     upload_component = null;
     // use a timer to queue a restart after the component has stopped
     setTimeout(() => {
       console.log('Upload component restarts')
       upload_component = Upload
     }, 0);
     console.log('Upload component restart queued');
     restart = false;  
  };

  ...
</script>

<style>
  ...
</style>

<!-- dynamic upload to restart the component when finished-->
  <svelte:component uid={uid} this={upload_component} bind:finished={restart}/>

Upload.svelte 

<script>
  import { onDestroy } from 'svelte';
  import { uploadCsv } from './upload.js'

  export let uid = null;
  export let finished;

  function uploadCsvCallback(result) {
    console.log(result);
    finished = true;
  };

  onDestroy(() => {
    console.log('Upload component destroyed');
  });
</script>

<style>
  .float-right {
    float: right;
  }
</style>

<!-- Select a CSV file to batch import a Firestore collection -->
<input type="file" name="files" class="float-right" accept=".csv" 
  on:change={uploadCsv(uid, uploadCsvCallback)}/>
...