Я также нашел документ анимации на angular.io быть неполным. Я использовал код примера и сделал несколько незначительных изменений, чтобы заставить его работать с кодом из их TOH app tutorial.
TL; DR
Добавить state="inactive" свойство к классу hero.ts героя отслеживать состояние анимации каждого героя.
В HTML, изменить способ их связывание с (click)="toggleState(hero)"(click)="hero.toggleState()" и написать этот метод в классе HeroesComponent:
toggleState(hero: Hero) { hero.state = (hero.state === 'active' ? 'inactive' : 'active'); }
Перепроводных onSelect() метод так, что gotoDetail() навигация работает.
Working plunk that follows steps below
Here is the plunker they provide with everything complete through section 5 - routing. Используйте его, чтобы следовать, если вы хотите.
Я собираюсь пройти через то, как изменить этот плунжер, чтобы достичь первой анимации в своем анимационном документе.
Первый код, который они частично вас через в анимации Документах добавить анимированные активные/неактивные состояния для выбранных героев в Heroes просмотра (в отличие от представления приборной панели):
import { Component, Input, trigger, state, animate } from '@angular/core';
import { Heroes } from './hero.service';
@Component({
moduleId: module.id,
selector: 'hero-list-basic',
template: `
<ul>
<li *ngFor="let hero of heroes"
[@heroState]="hero.state"
(click)="hero.toggleState()">
{{hero.name}}
</li>
</ul>
`,
styleUrls: ['hero-list.component.css'],
animations: [
trigger('heroState', [
state('inactive', style({
backgroundColor: '#eee',
transform: 'scale(1)'
})),
state('active', style({
backgroundColor: '#cfd8dc',
transform: 'scale(1.1)'
})),
transition('inactive => active', animate('100ms ease-in')),
transition('active => inactive', animate('100ms ease-out'))
])
]
})
export class HeroListBasicComponent {
@Input() heroes: Heroes;
}
Выше их (пример анимации) сопоставляет код в app/heroes.component.ts (из plnkr) и обратите внимание, что html/css были извлечены в отдельные файлы на plnkr. Я полагаю, большинство из тех, кто читал это, следовали учебному курсу и знакомы с этим кодом.
heroes.component.html Новая анимация будет в основном копируют существующие привязки на каждом герое <li>, поэтому удалить эти две строк - потому что они будут конфликтовать, если бы мы держали их - мы собираемся довести это функциональность обратно с состояниями анимации.
<ul class="heroes">
<li *ngFor="let hero of heroes">
--------->[class.selected]="hero === selectedHero"
--------->(click)="onSelect(hero)">
<span class="badge">{{hero.id}}</span> {{hero.name}}
</li>
</ul>
новый HTML из примера анимации:
<ul class="heroes">
<li *ngFor="let hero of heroes"
[@heroState]="hero.state"
(click)="hero.toggleState()">
<span class="badge">{{hero.id}}</span> {{hero.name}}
</li>
</ul>
Я не хочу, чтобы добавить метод toggleState к классу героя, я хотел его в компонент, который вызывает его. Поэтому я сменил привязку кликов на
(click)="toggleState(hero)"
и просто передать герою с щелчком метод, который нам еще нужно написать.
hero не обладает свойством state еще так давайте добавим, что в приложение/hero.ts:
добавить state:string = "inactive"; в список свойств.
Теперь давайте вернемся к heroes.component.ts, импортировать наши анимации зависимостей, добавить метаданные анимации в @Component и создать метод toggleState(). Мы хотим сохранить метод onSelect(), который мы удалили из html, мы изменим его и повторно его используем в одно мгновение.
Наверху, замените
import { Component, OnInit } from '@angular/core';
с
import { Component, OnInit, trigger, state, style, transition, animate } from '@angular/core';
Добавление в animations метаданных после styleUrls: [ ... ],:
animations: [
trigger('heroState', [
state('inactive', style({
backgroundColor: '#eee',
transform: 'scale(1)'
})),
state('active', style({
backgroundColor: '#cfd8dc',
transform: 'scale(1.1)'
})),
transition('inactive => active', animate('100ms ease-in')),
transition('active => inactive', animate('100ms ease-out'))
])
]
В HeroesComp onent добавить следующий метод:
toggleState(hero: Hero) {
hero.state = (hero.state === 'active' ? 'inactive' : 'active');
}
Так что все работает. Теперь давайте раскроем детали героя. Деталь героя немного изменилось после списка, который показывает, какой герой выбран, сопровождаемый кнопкой, которая перемещается по маршруту detail /: id. Но теперь его нет. Метод onSelect(), который мы сняли, запускал это.
Давайте переименовать onSelect() в updateSelectedHero(), а затем вызвать его изнутри toggleState():
updateSelectedHero(hero: Hero): void {
this.selectedHero = hero;
}
toggleState(hero: Hero) {
hero.state = (hero.state === 'active' ? 'inactive' : 'active');
this.updateSelectedHero(hero);
}
aaand мы вернулись в бизнесе. Появляется деталь героя, и на кнопке View Details вызывается gotoDetail(). Есть отвратительные недостатки пользовательского интерфейса, которые требуют выглаживания, но вы получаете эту идею.
My finished plunk