#4 Angular2. Тур героев. Список героев

poster
В этом уроке мы напишем вывод списка героев и отображение подробной инормации о герое в туре героев angular 2.
Понравилось? Поделитесь с друзьями!
Понравилось?
Поделитесь с друзьями!
Комментарии
Текст видео

Всем привет. Это четвертый урок тура героев и сегодня мы реализуем список героев и описание героя.

Для начала давайте добавим массив героев у конец файла app.component.ts

var HEROES: Hero[] = [
  { "id": 11, "name": "Mr. Nice" },
  { "id": 12, "name": "Narco" },
  { "id": 13, "name": "Bombasto" },
  { "id": 14, "name": "Celeritas" },
  { "id": 15, "name": "Magneta" },
  { "id": 16, "name": "RubberMan" },
  { "id": 17, "name": "Dynama" },
  { "id": 18, "name": "Dr IQ" },
  { "id": 19, "name": "Magma" },
  { "id": 20, "name": "Tornado" }
];

Это массив героев с типом Hero. Это массив обьектов с id и name. Теперь давайте создадим публичную переменную в классе AppComponent, чтобы получить доступ к этому массиву.

public heroes = HEROES;

Это создает публичную переменную. Мы конечно могли написать этот массив сразу в классе, но обычно все данные получаются от бекенда, поэтому мы их написали отдельно, чтобы иметь возможность потом легко вынести эти данные в сервис.

Теперь давайте отобразим список героев. Для начала удалим кусок нашего шаблона и оставим только title.

<h2>My Heroes</h2>
<ul class="heroes">
  <li>
    <!-- each hero goes here -->
  </li>
</ul>

Естественно мы хотим, чтобы у нас автоматически, в зависимости от количества героев выводились все эти герои на экран. Для этого мы будем использовать директиву, которая есть в angular 2, которая называется *ngFor. Директива начинается с звездочки, поэтому нужно ее всегда писать иначе у вас ваш код работать не будет.

Внутри пишем #hero of heroes. Эта запись читается так: пройди пожалуйста циклом по героям и каждый герой у нас будет доступен в локальной переменной #hero. Теперь внутри нашей li мы можем вывести какие-то данные о герое.

<li *ngFor="#hero of heroes">
  <span class="badge">{{hero.id}}</span> {{hero.name}}
</li>

Если мы посмотрим в браузер, то увидим, что у нас вывелся список героев, но правда пока без стилей.

Теперь давайте добавим стили для нашего компонента, чтобы он красиво выглядел. Что хорошего в angular 2 о стилях - это то, что здесь появилась возможность писать стили для определенного компонента. Эти стили не будет глобальными, а будут написаны только для этого компонента. Для этого мы будем использовать поле style, которое мы напишем в нашем декораторе. То есть styles у нас - это массив, внутри которого у нас строка. Мы используем строки из ес6, чтобы удобно с отступами писать стили.

styles:[`
  .selected {
    background-color: #CFD8DC !important;
    color: white;
  }
  .heroes {
    margin: 0 0 2em 0;
    list-style-type: none;
    padding: 0;
    width: 15em;
  }
  .heroes li {
    cursor: pointer;
    position: relative;
    left: 0;
    background-color: #EEE;
    margin: .5em;
    padding: .3em 0;
    height: 1.6em;
    border-radius: 4px;
  }
  .heroes li.selected:hover {
    background-color: #BBD8DC !important;
    color: white;
  }
  .heroes li:hover {
    color: #607D8B;
    background-color: #DDD;
    left: .1em;
  }
  .heroes .text {
    position: relative;
    top: -3px;
  }
  .heroes .badge {
    display: inline-block;
    font-size: small;
    color: white;
    padding: 0.8em 0.7em 0 0.7em;
    background-color: #607D8B;
    line-height: 1em;
    position: relative;
    left: -1px;
    top: -4px;
    height: 1.8em;
    margin-right: .8em;
    border-radius: 4px 0 0 4px;
  }
`]

Важный нюанс в том, что эти стили привязаны к компоненту и они не глобальные. Если мы посмотрим в браузер, то все наши герои уже стилизованные и если мы проинспектим одного героя, то мы увидим, что класс у него

.heroes[_ngcontent-wxy-1] {}

Как мы видим, это не такой класс, как мы написали, поскольку здесь мы написали стили для класса .heroes, но angular умный и он генерирует эти стили для конкретного компонента. Если вы напишите такие же стили в другом компоненте, то они между собой пересекаться не будут.

Теперь когда у нас есть список героев давайте сделаем детальное отображение героя при клике на имя героя. Для начала добавим клик на li.

<li *ngFor="#hero of heroes" (click)="onSelect(hero)">
  <span class="badge">{{hero.id}}</span> {{hero.name}}
</li>

То есть мы указываем что хотим выполнить клик и вызвать метод onSelect, куда мы передадим hero на которого мы кликнули. Давайте удалим переменную hero в классе, так как мы все равно ее не используем и напишем вместо нее selectedHero.

selectedHero: Hero;

И добавим onSelect метод

onSelect(hero: Hero) { this.selectedHero = hero; }

В onSelect мы получаем героя и записываем его в переменную selectedHero.

Давайте выведем выбраного героя, используя код из предыдущего урока. Но так как мы хотим показывать эту информацию только после того, как у нас есть выбранный герой, то мы завернем весь этот блок в div с условием, что мы показываем этот блок только когда у нас есть selectedHero.

Для этого мы используем директиву *ngIf и внутрь нее передаем selectedHero. Это значит что блок будет показываться только когда у нас есть selectedHero.

<div *ngIf="selectedHero">
  <h2>{{selectedHero.name}} details!</h2>
  <div><label>id: </label>{{selectedHero.id}}</div>
  <div>
    <label>name: </label>
    <input [(ngModel)]="selectedHero.name" placeholder="name"/>
  </div>
</div>

Как мы видим в браузере, когда мы кликаем на определенного героя, то снизу у нас показывается форма редактирования героя и когда мы кликаем на разных героев, то подгружаются разные данные в selectedHero.

Теперь давайте реализуем подсветку активного героя. Для этого на li будем вешать class selected если hero, который находится в этой li равняется selectedHero. Добавим в li вот такую конструкцию

[class.selected]="hero === selectedHero"

Давайте попробуем. Вот Mr.Nice подсвечен серым цветом, а если мы кликнем на Tornado, то выделение переключится. Если мы проинспектим этот елемент, то увидим, что у нас на нем висит класс selected, который и меняет стили.

В этом уроке мы реализовали вывод списка героев и просмотр по клику информации о герое. А в следующем уроке мы разберем как разбивать наше приложение на компоненты и передавать между ними информацию.

Только зарегистрированные пользователи могут оставлять комментарии.  Войдите, пожалуйста.
Serafim
7 месяцев назад
Привет, а будут уроки по TypeScript ? =)
monsterlessons
7 месяцев назад
Привет. В ближайшее время новых уроков не будет, так как я занимаюсь другими проектами.