Ich fand auch die Animationen doc auf angular.io unvollständig. Ich habe den Beispielcode verwendet und ein paar kleinere Änderungen vorgenommen, damit er mit dem Code von TOH app tutorial funktioniert.
TL; DR
eine state="inactive" Eigenschaft auf die hero.ts Heldenklasse hinzufügen jeden Helden Animation Zustand zu verfolgen.
In HTML, ändern ihre (click)="hero.toggleState()" Methode (click)="toggleState(hero)" Bindung und diese Methode in der Klasse HeroesComponent schreiben:
toggleState(hero: Hero) { hero.state = (hero.state === 'active' ? 'inactive' : 'active'); }
Rewire onSelect() Methode, so dass gotoDetail() Navigation funktioniert.
Working plunk that follows steps below
Here is the plunker they provide with everything complete through section 5 - routing. es verwenden zu folgen, wenn Sie möchten.
Ich werde durch gehen, wie man diese Plunk ändern, um die erste Animation in ihren Animationen doc zu erreichen.
Der erste Code, der sie teilweise Sie durch in der Animationen docs geht in den Helden animierten aktiv/inaktiv Zustände zu ausgewählten Helden hinzuzufügen sieht (im Gegensatz zu der Dashboard-Ansicht entgegengesetzt):
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;
}
Oben, ihr (Animationen Beispiel) Code parallel zum Code in app/heroes.component.ts (aus dem PLNKR) und beachten Sie, dass die HTML/CSS wurden in separaten Dateien auf PLNKR extrahiert. Ich nehme an, die meisten, die dies gelesen haben, sind dem Tutorial gefolgt und sind mit diesem Code vertraut.
heroes.component.html Die neuen Animationen werden im Grunde die bestehenden Bindungen an jedem Helden <li>, replizieren so diese beiden Zeilen löschen - denn sie würden in Konflikt geraten, wenn wir sie gehalten - wir gehen, dass bringen Funktionalität zurück mit Animationszuständen.
<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>
neue html von Animationen Beispiel:
<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>
Ich wollte nicht die toggleState Methode, um die Heldenklasse hinzuzufügen, ich habe es in der Komponente wollte, dass es nennt. Also habe ich die Klickbindung auf
geändert und gebe einfach den angeklickten Helden an die Methode weiter, die wir noch schreiben müssen.
A hero hat nicht die Eigenschaft state noch so lassen sie das App in hinzufügen/hero.ts:
state:string = "inactive"; von Eigenschaften zur Liste hinzufügen.
sich zum heroes.component.ts Jetzt wieder, unsere Animationen Abhängigkeiten importieren, die Animationen Metadaten in @Component hinzufügen, und erstellen Sie die toggleState() Methode. Wir wollen die onSelect() Methode beibehalten, die wir aus HTML entfernt haben, wir werden sie ändern und sie sofort wiederverwenden.
Up oben, ersetzen
import { Component, OnInit } from '@angular/core';
mit
import { Component, OnInit, trigger, state, style, transition, animate } from '@angular/core';
Fügen Sie den animations Metadaten nach 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'))
])
]
Im HeroesComp Onent-Klasse fügen Sie die folgende Methode hinzu:
toggleState(hero: Hero) {
hero.state = (hero.state === 'active' ? 'inactive' : 'active');
}
So dass alles funktioniert. Jetzt brechen wir das Heldendetail auf. Das Heldendetail war ein kleiner Klappentext nach der Liste, die anzeigt, welcher Held ausgewählt wurde, begleitet von einem Knopf, der zur Detail /: ID-Route navigiert. Aber jetzt ist es weg. Die onSelect() Methode, die wir losgelöst haben, hat das eingeführt.
des onSelect()-updateSelectedHero() Lassen Sie umbenennen und es dann von innen toggleState() nennen:
updateSelectedHero(hero: Hero): void {
this.selectedHero = hero;
}
toggleState(hero: Hero) {
hero.state = (hero.state === 'active' ? 'inactive' : 'active');
this.updateSelectedHero(hero);
}
aaand wir sind wieder im Geschäft. Das Heldendetail erscheint und die Schaltfläche Details anzeigen ruft gotoDetail() auf. Es gibt widerliche UI-Fehler, die ausgebügelt werden müssen, aber Sie bekommen die Idee.
My finished plunk