Вызов функции компонента Svelte из глобальной области видимости

Я создаю страницу Sapper, на которой хочу использовать Google Sign -в кнопке. Для указания функции обратного вызова требуется атрибут data-onsuccess. Из того, что мне удалось обнаружить в JS-библиотеке платформы Google, функция ищет функцию в глобальной области / window.

Есть ли способ получить доступ / вызвать функцию компонента Svelte из области глобальной веб-страницы? Это может быть полезно для взаимодействия с внешними библиотеками, которые нельзя загрузить через import прямо в компонент.

Пример того, что я пытаюсь сделать:

<script>
  function onSignComponent(user){
    console.log('Signed in');
  }
</script>

<div id="login" class="g-signin2" data-onsuccess="{onSignComponent}" data-theme="dark" />

Это работает, когда onSignComponent находится в глобальной области видимости, но не когда он находится в области видимости компонента.


javascript google-signin svelte sapper
person PhoenixS    schedule 16.09.2019    source источник

Ответы (2)


arrow_upward
8
arrow_downward

Самый простой способ сделать это - просто поместить функцию на window внутри компонента:

<script>
  window.onSignIn = user => {
    // ...
  };
</script>

<div id="login" class="g-signin2" data-onsuccess="onSignIn" data-theme="dark" />
person Rich Harris    schedule 16.09.2019
comment
Вау, это до неприличия просто. Я должен был подумать об этом, пробуя другой обходной путь (прикрепление хранилищ svelte к объекту окна). Большое спасибо! - person PhoenixS; 16.09.2019

arrow_upward
3
arrow_downward

Один из способов сделать это - добавить директиву <svelte:window on:xxx> в ваш компонент, а затем в методе onSignComponent вызвать это событие xxx.

в компоненте

<svelte:window on:loginSuccess={loginSuccess}></svelte:window>

в другом месте

const myEvent = new CustomEvent('loginSuccess', { ... some object });
window.dispatchEvent(myEvent);
person Stephane Vanraes    schedule 16.09.2019
comment
Прохладный. Я думал о svelte:window, но не знал, что могу связать его с настраиваемыми событиями - person PhoenixS; 16.09.2019