Если вы только что наткнулись на это руководство, обязательно сначала прочитайте часть 1 здесь: https://medium.com/@nerdic.coder/stencil-tutorial-tour-of-heroes-832a09ef3d82
Если вы еще не прошли часть 1, вы можете взять код отсюда, чтобы следовать второй части руководства: https://github.com/nerdic-coder/stencil-tour-of-heroes/tree /v1.1
Показать список героев
Теперь мы расширим приложение Tour of Heroes, чтобы отображать список героев и позволять пользователям выбирать героя и отображать сведения о герое.
Создавайте мнимых героев
Создайте файл с именем mock-heroes.ts в папке src/components/heroes/. Определите константу HEROES как массив из десяти героев и экспортируйте ее. Файл должен выглядеть так:
Отображение героев
Откройте файл компонента Heroes и импортируйте макет HEROES.
import { HEROES } from './mock-heroes';
Добавьте в класс свойство heroes, которое предоставляет этих героев для привязки.
private heroes: Hero[] = HEROES;
Список героев с оператором карты JSX
Откройте файл компонента Heroes и внесите следующие изменения в результат рендеринга:
- Добавьте
<h2>вверху, - Под ним добавьте неупорядоченный список HTML (
<ul>) - Вставьте
<li>в<ul>, который отображает свойстваhero. - Добавьте несколько классов CSS для стилизации (в ближайшее время вы добавите стили CSS).
- Добавьте оператор
mapвокруг элемента<li>.
Сделайте так, чтобы это выглядело так:
Может быть не так чисто, как Angulars *ngFor, но здесь очень ясно, что является частью цикла.
Стиль героев
Добавьте следующий код css в файл heroes.css:
Как и в Angular, таблицы стилей, указанные в метаданных @Component, привязаны к этому конкретному компоненту.
Мастер/деталь
Когда пользователь щелкает героя в основном списке, компонент должен отображать подробности выбранного героя внизу страницы.
В этом разделе вы будете прослушивать событие клика по элементу героя и обновлять детали героя.
Добавить привязку события клика
Добавьте привязку события клика к <li> следующим образом:
<li onClick={ () => this.onSelect(hero)}>
Здесь мы используем событие html onClick по умолчанию вместо Angular (щелчок), в остальном это почти то же самое.
Добавьте обработчик события клика
Переименуйте свойство hero компонента в selectedHero, но не назначайте его. При запуске приложения нет выбранного героя.
Добавьте следующий метод onSelect(), который присваивает выбранный герой из шаблона компоненту selectedHero.
@State() private selectedHero: Hero;
onSelect(hero: Hero): void {
this.selectedHero = hero;
}
Обновите шаблон сведений
Шаблон по-прежнему ссылается на старое свойство hero компонента, которого больше не существует. Переименуйте hero в selectedHero.
Скройте пустые данные с помощью тернарного оператора JavaScript
После обновления браузера приложение не работает.
Откройте инструменты разработчика браузера и найдите в консоли сообщение об ошибке, подобное этому:
TypeError: Cannot read property ‘name’ of undefined
Что случилось?
Когда приложение запускается, selectedHero становится undefined предназначенным.
Выражения привязки в шаблоне, которые ссылаются на свойства selectedHero — такие выражения, как {this.selectedHero.name} — должны завершаться ошибкой, поскольку герой не выбран.
Исправление
Компонент должен отображать сведения о выбранном герое, только если существует selectedHero.
В Stencil мы исправим это, обернув детали тернарным оператором следующим образом:
Таким образом, выражение начинается с проверки того, определено ли this.selectedHero, и если оно определено, оно отображает первые скобки после вопросительного знака, если оно не определено, оно показывает содержимое вторых скобок. Если вы не хотите ничего показывать, если selectedHero не определено, вы можете просто установить null во вторых скобках.
Стиль выбранного героя
Этот цвет выбранного героя является работой класса .selected CSS в стилях, которые вы добавили ранее. Вам просто нужно применить класс .selected к <li>, когда пользователь щелкнет по нему.
Добавьте этот условный атрибут класса в список героев <li>element:
<li class={(this.selectedHero === hero ? ‘selected’ : ‘’)} onClick={ () => this.onSelect(hero)}>
Основные/детальные компоненты
Теперь мы собираемся выделить часть сведений о герое в отдельный компонент Stencil, чтобы его можно было использовать, например, повторно.
Создайте новую папку hero-details внутри папки components и создайте в новой папке следующие файлы,
- герой-details.css
- герой-details.spec.ts
- герой-details.tsx
Добавьте следующий код в hero-details.spec.ts :
Удалите детали компонента heroes и добавьте его к компоненту hero-details, чтобы он выглядел примерно так:
Добавьте свойство героя @Prop()
Реквизиты — это настраиваемые атрибуты/свойства, публично доступные для элемента, для которых разработчики могут указывать значения. Мы добавляем параметр mutable в Prop(), чтобы компонент знал, что ему разрешено обновлять переменную hero, например, когда мы редактируем имя в поле ввода.
Покажи HeroDetails Component
Теперь, чтобы иметь возможность снова отображать информацию о герое на странице героев, просто добавьте следующий html-тег в файл heroes.tsx под списком героев:
<app-hero-details hero={this.selectedHero}></app-hero-details>
Два компонента будут иметь отношение родитель/потомок. Родительский компонент Heroes будет управлять дочерним HeroDetails, отправляя ему нового героя для отображения всякий раз, когда пользователь выбирает героя из списка.
Вывод
На этом вторая часть этого урока завершена. В следующей части мы рассмотрим, как мы можем добавить поставщиков услуг для доставки данных героев компонентам.
Вы можете проверить результат этого руководства в теге репозитория Github v2.0: https://github.com/nerdic-coder/stencil-tour-of-heroes/tree/v2.0
Вы можете продолжить часть 3 здесь: https://medium.com/@nerdic.coder/stencil-tutorial-tour-of-heroes-part-3-9b0e128ee664
Надеюсь, вам понравилась эта часть, и дайте мне знать в комментариях, что вы думаете об этом руководстве.
