目前,我正在开发一个项目,该项目Menu在除两个页面之外的所有页面上共享一个组件。我在根_layout.svelte文件中添加了菜单组件。现在因为不需要Menu组件的两个页面是嵌套路由。的Menu,因为他们是孩子的路线是在他们里面出现。他们是这样看的。但我认为应该有一些方法可以选择退出/离开父布局。否则我将不得不删除_layout.svelte根文件Menu并向每个路由添加组件,这对 DRY 来说太过分了。有没有办法_layout.svelte在 Sapper 中离开父母?
情况是我Loading在获取请求时显示组件。我使用 store 设置$loading为true,内部条件是Loading组件。问题是加载组件似乎需要一些时间才能显示。感觉/看起来原因是加载组件的重新渲染。所以,我在 Svelte 中寻找v-show类似的东西,但我在文档中找不到。(如果有的话不要生气,告诉我即可。)
有人可以帮忙解决这个案子吗?
在 Sapper 中,AFAIK 来自文档。访问 URL 参数的唯一方法是通过preload()函数,从该函数可以在params对象内部使用参数。
问题是我想在preload()函数之外访问这些参数。从文档的鹰眼角度来看。我看不到/看不到我的问题/要求的解决方案。
我试过在里面为 url 参数设置一个属性data()。但它似乎preload()无法获得data是否明智或设置明智。它不是为了那些东西。
onMount与 SvelteJS 中没有生命周期事件不同beforeMount。那么,我们在挂载之前如何获取页面所依赖的数据呢?onMount获取会产生故障。可以说我可以将依赖 DOM 包装在 if 条件中。但我认为这不是正确的解决方案。与 Sapper 非常相似,有一个preload函数可以在安装之前加载页面相关数据。preloadSvelteJS 中这种(Sapper 的)行为的替代方案是什么?
加载内部有输入文件的组件后。我怎样才能专注于那个特定领域?
TextField.svelte
<script>
export let label = ''
export let name = ''
export let placeholder = ''
export let value = ''
</script>
<div class="field">
<label for={name}>{label}</label>
<input {placeholder} type="text" {name} bind:value={value} >
<slot></slot>
</div>
Run Code Online (Sandbox Code Playgroud)
App.svelte
<script>
import TextField from './TextField'
import {onMount} from 'svete'
onMount(() => {
// This line is funny.. I know
document.querySelector('[name="firstname"]').focus()
})
</script>
<TextField label="First Name" name="firstname" />
Run Code Online (Sandbox Code Playgroud) 在我看来(我知道我会错)我onMount在svelte 的生命周期函数内所做的事情也可以在它之外完成。有区别吗?或者..我错过了很多点。
<script>
import {onMount} from 'svelte'
function doSomething() {
// ......
// ..........
}
onMount(() => {
function doSomething() {
// ......
// ..........
}
})
</script>
Run Code Online (Sandbox Code Playgroud) 事情是,我有两个途径
/istifta和/istifta/edit
该/istifta路线显示istiftas(问题),而/istifta/edit路线开辟了编辑在同一页上,由于同样的问题面板_layout.svelte文件。
唯一的问题是,当我/istifta/edit从/istifta. 它不仅会打开编辑面板,还会滚动到页面顶部。我怎样才能阻止这种行为?我想在此导航时保持在相同的滚动位置。istiftas 是一个很长的清单。对于编辑,它应该保持在相同的滚动位置。一次又一次地滚动到底部并找到 id 对用户来说过于复杂。
请解决这个问题。特别是Rich Harris,如果您正在阅读本文。
呈现原始html时如何使用动态属性和绑定。假设:
<script>
let name = 'Joseph'
let test = '<p>{name}</p>'
</script>
{@html test} <!-- Outputs: {name} instead of Joseph -->
Run Code Online (Sandbox Code Playgroud)
我知道,有人会回答,一种更好的方法是创建一个组件。但是我仍然想问,是否有一种在原始html渲染中使用绑定的方法?