cargdev/angular
1
0
Fork 0
Code Issues 10 Pull Requests Actions Packages Projects Releases Wiki Activity

docs: Refresh content on routable animations for router guide (#20023)

Browse Source 
PR Close #20023
This commit is contained in:
Brandon Roberts
2017-10-09 22:21:04 -05:00
committed by Kara Erickson
parent 15a2b8f622
commit 3c8aa0b301
14 changed files with 133 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
aio/content/examples/router/src/app/animations.ts
View File

@ -1,26 +1,35 @@
// #docregion
import { animate, state, style, transition, trigger } from '@angular/animations';
import {
trigger, animateChild, group,
transition, animate, style, query
} from '@angular/animations';
// Component transition animations
export const slideInDownAnimation =
// Routable animations
export const slideInAnimation =
trigger('routeAnimation', [
state('*',
style({
opacity: 1,
transform: 'translateX(0)'
})
),
transition(':enter', [
style({
opacity: 0,
transform: 'translateX(-100%)'
}),
animate('0.2s ease-in')
]),
transition(':leave', [
animate('0.5s ease-out', style({
opacity: 0,
transform: 'translateY(100%)'
}))
transition('heroes <=> hero', [
style({ position: 'relative' }),
query(':enter, :leave', [
style({
position: 'absolute',
top: 0,
left: 0,
width: '100%'
})
]),
query(':enter', [
style({ left: '-100%'})
]),
query(':leave', animateChild()),
group([
query(':leave', [
animate('300ms ease-out', style({ left: '100%'}))
]),
query(':enter', [
animate('300ms ease-out', style({ left: '0%'}))
])
]),
query(':enter', animateChild()),
])
]);

21
aio/content/examples/router/src/app/app.component.2.ts
View File

@ -1,16 +1,31 @@
/* Second Heroes version */
// #docregion
import { Component } from '@angular/core';
// #docregion animation-imports
import { RouterOutlet } from '@angular/router';
import { slideInAnimation } from './animations';
// #enddocregion animation-imports
@Component({
selector: 'app-root',
// #docregion template
template: `
<h1>Angular Router</h1>
<nav>
<a routerLink="/crisis-center" routerLinkActive="active">Crisis Center</a>
<a routerLink="/heroes" routerLinkActive="active">Heroes</a>
</nav>
<router-outlet></router-outlet>
`
<div [@routeAnimation]="getAnimationData(routerOutlet)">
<router-outlet #routerOutlet="outlet"></router-outlet>
</div>
`,
animations: [ slideInAnimation ]
// #enddocregion template
})
export class AppComponent { }
// #docregion function-binding
export class AppComponent {
getAnimationData(outlet: RouterOutlet) {
return outlet && outlet.activatedRouteData && outlet.activatedRouteData['animation'];
}
}
// #enddocregion function-binding

4
aio/content/examples/router/src/app/app.component.4.ts
View File

@ -14,7 +14,9 @@ import { Component } from '@angular/core';
// #enddocregion contact-link
</nav>
// #docregion outlets
<router-outlet></router-outlet>
<div [@routeAnimation]="getAnimationData(routerOutlet)">
<router-outlet #routerOutlet="outlet"></router-outlet>
</div>
<router-outlet name="popup"></router-outlet>
// #enddocregion outlets
`

4
aio/content/examples/router/src/app/app.component.5.ts
View File

@ -12,7 +12,9 @@ import { Component } from '@angular/core';
<a routerLink="/admin" routerLinkActive="active">Admin</a>
<a [routerLink]="[{ outlets: { popup: ['compose'] } }]">Contact</a>
</nav>
<router-outlet></router-outlet>
<div [@routeAnimation]="getAnimationData(routerOutlet)">
<router-outlet #routerOutlet="outlet"></router-outlet>
</div>
<router-outlet name="popup"></router-outlet>
`
// #enddocregion template

4
aio/content/examples/router/src/app/app.component.6.ts
View File

@ -14,7 +14,9 @@ import { Component } from '@angular/core';
<a routerLink="/login" routerLinkActive="active">Login</a>
<a [routerLink]="[{ outlets: { popup: ['compose'] } }]">Contact</a>
</nav>
<router-outlet></router-outlet>
<div [@routeAnimation]="getAnimationData(routerOutlet)">
<router-outlet #routerOutlet="outlet"></router-outlet>
</div>
<router-outlet name="popup"></router-outlet>
`
// #enddocregion template

12
aio/content/examples/router/src/app/app.component.ts
View File

@ -1,6 +1,8 @@
// #docplaster
// #docregion
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { slideInAnimation } from './animations';
@Component({
selector: 'app-root',
@ -14,10 +16,16 @@ import { Component } from '@angular/core';
<a routerLink="/login" routerLinkActive="active">Login</a>
<a [routerLink]="[{ outlets: { popup: ['compose'] } }]">Contact</a>
</nav>
<router-outlet></router-outlet>
<div [@routeAnimation]="getAnimationData(routerOutlet)">
<router-outlet #routerOutlet="outlet"></router-outlet>
</div>
<router-outlet name="popup"></router-outlet>
`
`,
animations: [ slideInAnimation ]
// #enddocregion template
})
export class AppComponent {
getAnimationData(outlet: RouterOutlet) {
return outlet && outlet.activatedRouteData && outlet.activatedRouteData['animation'];
}
}

9
aio/content/examples/router/src/app/compose-message.component.ts
View File

@ -2,18 +2,11 @@
import { Component, HostBinding } from '@angular/core';
import { Router } from '@angular/router';
import { slideInDownAnimation } from './animations';
@Component({
templateUrl: './compose-message.component.html',
styles: [ ':host { position: relative; bottom: 10%; }' ],
animations: [ slideInDownAnimation ]
styles: [ ':host { position: relative; bottom: 10%; }' ]
})
export class ComposeMessageComponent {
@HostBinding('@routeAnimation') routeAnimation = true;
@HostBinding('style.display') display = 'block';
@HostBinding('style.position') position = 'absolute';
details: string;
message: string;
sending = false;

8
aio/content/examples/router/src/app/crisis-center/crisis-detail.component.1.ts
View File

@ -5,7 +5,6 @@ import { ActivatedRoute, Router, ParamMap } from '@angular/router';
import { Observable } from 'rxjs';
import { switchMap } from 'rxjs/operators';
import { slideInDownAnimation } from '../animations';
import { Crisis, CrisisService } from './crisis.service';
import { DialogService } from '../dialog.service';
@ -25,14 +24,9 @@ import { DialogService } from '../dialog.service';
</p>
</div>
`,
styles: ['input {width: 20em}'],
animations: [ slideInDownAnimation ]
styles: ['input {width: 20em}']
})
export class CrisisDetailComponent implements OnInit {
@HostBinding('@routeAnimation') routeAnimation = true;
@HostBinding('style.display') display = 'block';
@HostBinding('style.position') position = 'absolute';
crisis: Crisis;
editName: string;

8
aio/content/examples/router/src/app/crisis-center/crisis-detail.component.ts
View File

@ -4,7 +4,6 @@ import { Component, OnInit, HostBinding } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { Observable } from 'rxjs';
import { slideInDownAnimation } from '../animations';
import { Crisis } from './crisis.service';
import { DialogService } from '../dialog.service';
@ -24,14 +23,9 @@ import { DialogService } from '../dialog.service';
</p>
</div>
`,
styles: ['input {width: 20em}'],
animations: [ slideInDownAnimation ]
styles: ['input {width: 20em}']
})
export class CrisisDetailComponent implements OnInit {
@HostBinding('@routeAnimation') routeAnimation = true;
@HostBinding('style.display') display = 'block';
@HostBinding('style.position') position = 'absolute';
crisis: Crisis;
editName: string;

11
aio/content/examples/router/src/app/heroes/hero-detail.component.ts
View File

@ -7,8 +7,6 @@ import { Component, OnInit, HostBinding } from '@angular/core';
import { Router, ActivatedRoute, ParamMap } from '@angular/router';
import { Observable } from 'rxjs';
import { slideInDownAnimation } from '../animations';
import { Hero, HeroService } from './hero.service';
@Component({
@ -26,16 +24,9 @@ import { Hero, HeroService } from './hero.service';
<button (click)="gotoHeroes(hero)">Back</button>
</p>
</div>
`,
animations: [ slideInDownAnimation ]
`
})
export class HeroDetailComponent implements OnInit {
// #docregion host-bindings
@HostBinding('@routeAnimation') routeAnimation = true;
@HostBinding('style.display') display = 'block';
@HostBinding('style.position') position = 'absolute';
// #enddocregion host-bindings
hero$: Observable<Hero>;
// #docregion ctor

22
aio/content/examples/router/src/app/heroes/heroes-routing.module.2.ts Normal file
View File

@ -0,0 +1,22 @@
// #docregion
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HeroListComponent } from './hero-list.component';
import { HeroDetailComponent } from './hero-detail.component';
const heroesRoutes: Routes = [
{ path: 'heroes', component: HeroListComponent, data: { animation: 'heroes' } },
{ path: 'hero/:id', component: HeroDetailComponent, data: { animation: 'hero' } }
];
@NgModule({
imports: [
RouterModule.forChild(heroesRoutes)
],
exports: [
RouterModule
]
})
export class HeroRoutingModule { }
// #enddocregion

4
aio/content/examples/router/src/app/heroes/heroes-routing.module.ts
View File

@ -8,8 +8,8 @@ import { HeroDetailComponent } from './hero-detail.component';
const heroesRoutes: Routes = [
{ path: 'heroes', redirectTo: '/superheroes' },
{ path: 'hero/:id', redirectTo: '/superhero/:id' },
{ path: 'superheroes', component: HeroListComponent },
{ path: 'superhero/:id', component: HeroDetailComponent }
{ path: 'superheroes', component: HeroListComponent, data: { animation: 'heroes' } },
{ path: 'superhero/:id', component: HeroDetailComponent, data: { animation: 'hero' } }
];
@NgModule({