苗条的两个组件来访问同一个对象

Question

在我的应用程序中，我有一条路线 map.svelte

这有两个子组件：Map.svelte 和 LayerSelector.svelte

Map.svelte 创建一个 OpenLayers map 实例。 LayerSelector.svelte 需要访问此实例。

我在 map.svelte 中声明 map 实例并将其绑定到两个组件，但似乎无法在 LayerSelector.svelte

中访问它

map.svelte:

<script>
  import Map from '../components/Map.svelte';
  import MapLayerSelectorDialog from '../components/LayerSelector.svelte';
  let map;
</script>

<div class="map" id="map">
 <Map organisation={organisation} meta={meta} 
  showBackControl="true" showEditControl="true" showSearchControl="true"
  bind:map={map}
  on:mapready={initLayerSelector(map)}
  on:map-back={back=goBack}
  on:featureselected={featureSelected}
  on:togglelayerselector={toggleLayerSelector}
  on:togglemapsearch={toggleMapSearch}
  on:togglemapeditcontrol={toggleMapEdit}
 />
</div>

<MapLayerSelectorDialog bind:showDialog={showLayerSelectorDialog}
  bind:meta = {meta}
  bind:map={map}>
</MapLayerSelectorDialog>

Map.svelte:

export let map = null;
...
onMount(async () => {
  map = await initMap ('map', organisation, meta, startCoords);
});
...

initMap.js

export async function initMap (div, organisation, meta, startCoords) {
  var map = new Map({
    target: div, //'map',
    view: new View({
      center: fromLonLat ([1330601.87, 7916443.12]),
      zoom: 12,
    }),
  });
  addLayers (map, meta);
});

LayerSelector.svelte:

<script>
export let map
</script>
{#each map.getLayers() as layer}
  <p>{layer.get('name')}</p>
{/each}

我可能哪里出错了？我是否需要将 OpenLayers map 实例放在可写存储中？

Answer 1

本身，您的代码应该可以工作。您可以将变量双向绑定到两个单独的子组件，就像您正在做的那样，然后让其中之一对其进行初始化。

我创建了一个REPL that illustrates that it's possible。

当你说你不能访问变量时，你是什么意思？您收到意外值或错误？

我怀疑您遇到的问题是 map 在 onMount 运行之前的一小段时间内会是 undefined。如果未设置 map，LayerSelector 将抛出错误。

如果这是问题所在，请将 map.getLayers() 替换为例如map ? map.getLayers() : [] 会修复它。

也就是说，有很多双向绑定会导致数据流不清晰。我会考虑在 map.svelte 中初始化变量，然后将其简单地传递给其他组件以稍微简化数据流。

苗条的两个组件来访问同一个对象

svelte two components to access same object

svelte

svelte-component

svelte-store

openlayers-6