Переключение компонентов в Svelte/SvelteKit не работает
Вчера я начал изучать Svelte как свою первую платформу Javascript для внешнего интерфейса, и я был разочарован, пытаясь решить одну проблему за другой. Сегодня у меня возникла еще одна проблема, которую я не смог решить.
Я пытаюсь реализовать функцию, позволяющую переключать компоненты. Если пользователь нажимает на значок «Настройки», я хочу отобразить компонент «Настройки», а в компоненте «Настройки», если он нажимает на значок «Назад», компонент «Настройки» закрывается.
Звучит просто, но по какой-то причине я не могу заставить это работать!
Это мои сообщения/+page.svelte -
<script>
import Settings from '../../components/Settings.svelte';
let showSettings = false;
function toggleSettings() {
showSettings = !showSettings;
console.info('Toggle Settings Clicked. showSettings:', showSettings);
}
</script>
<style>
/* My styles are here */
</style>
<body class = "text-white" style = "background-color: #000000;">
<div class = "container-fluid min-vh-100 d-flex flex-column" style = "width: 80%;">
<div class = "row flex-grow-1">
<div class = "col-md-4 border-right" id = "sidebar-container">
<div class = "p-3">
<div class = "d-flex align-items-center justify-content-between">
<h3 style = "font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, Helvetica, sans-serif; font-weight: 700; font-size: 20px; line-height: 24px; color: #e7e9ea;">Messages</h3>
<div class = "fs-6 text-white">
<button id = "gear-icon" class = "icon-button" on:click = {toggleSettings} aria-label = "Toggle Settings">
<i class = "bi bi-gear me-3"></i>
</button>
<i class = "bi bi-envelope-at"></i>
</div>
</div>
<br id = "break-tag">
<div id = "welcome-message">
<h4 style = "font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, Helvetica, sans-serif; font-weight: 800; font-size: 31px; line-height: 36px; color: #e7e9ea;">Welcome to your inbox!</h4>
<p style = "font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, Helvetica, sans-serif; font-weight: 400; font-size: 15px; line-height: 20px; color: #71767b;">Search for a user and have private conversations with them.</p>
<button class = "btn p-3" style = "font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, Helvetica, sans-serif; font-weight: 700; font-size: 17px; line-height: 20px; color: #ffffff; background-color: #1d9bf0; border-radius: 50px;">Write a message</button>
</div>
</div>
</div>
{#if showSettings}
<Settings />
{:else}
<div id = "content-column" class = "col-md-8 border-right d-flex flex-column align-items-center justify-content-center">
<div class = "p-3 text-center">
<h3 style = "font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, Helvetica, sans-serif; font-weight: 800; font-size: 31px; line-height: 36px; color: #e7e9ea;">Select a message</h3>
<p style = "font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, Helvetica, sans-serif; font-weight: 400; font-size: 15px; line-height: 20px; color: #71767b;">Choose from your existing conversations, or start a new one.</p>
<button class = "btn p-3" style = "font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, Helvetica, sans-serif; font-weight: 700; font-size: 17px; line-height: 20px; color: #ffffff; background-color: #1d9bf0; border-radius: 50px;">New message</button>
</div>
</div>
{/if}
</div>
</div>
</body>
Ничего не происходит, когда я нажимаю на значок настроек. Ничего даже не отправляется в консоль браузера. В моем терминале ошибок не отображается. Я не знаю, в чем может быть проблема. Как будто Svelte/Sveltekit даже не распознает мои нажатия кнопок. Я не знаю, неправильный ли мой код или моя конфигурация где-то неверна для обработчиков событий. Я установил все через npm, поэтому не думаю, что что-то упускаю.
@JohnPhilips, пожалуйста, скажите мне, если вы решите эту проблему.
Я бы сказал, что если щелчок JS и console.info() даже не срабатывают, где-то должна быть ошибка JS? Я скопировал это в REPO, и все работало нормально. Путь к компоненту «Настройки» случайно неверный? Возможно, когда вы нажимаете кнопку, showSettings === true вызывает проблему, поэтому console.info() никогда не срабатывает.
@thegaffney Я решил это.
@JohnPhilips Я решил это
Логика в порядке. Хотя <body> уже должен быть определен где-то еще (app.html в SvelteKit), если вы попытаетесь вложить элементы тела, это может привести к проблемам. Кроме того, вы используете кнопку отправки (по умолчанию type из <button>), чтобы открыть настройки. Если в дело вмешается форма, это также вызовет проблемы.
@brunnerh, вы правы, что причиной проблем была проблема с HTML. Кто-то сказал мне об этом вчера. Спасибо
Ответы 1
Я решил это с помощью кого-то. Проблема была где-то в другом месте моего проекта.
Учитывая, что я впервые использовал интерфейс JS-фреймворка, я испортил свой макет/+page.svelte, и это повлияло на мои сообщения/+Page.svelte, где находился приведенный выше код в моем вопросе.
Проблема заключалась в том, что мой html-макет имел
<head> </head>
html, который уже обрабатывался моим app.html, поэтому мне пришлось использовать синтаксис svelte вместо тега в моем файле макета -
<svelte:head> </svelte:head>
И это решило проблему.
У меня тоже есть проблема.