change - router events angular 6
Animaciones de transición de página con enrutador angular y promesas de interfaz de componentes (2)
Al citar de los documentos, si alguno de estos enlaces devuelve una Promesa, esperará hasta que se complete para pasar a la siguiente, para que pueda devolver fácilmente una Promesa que básicamente no hace nada y esperar un segundo (o el tiempo que desee). necesitar).
onActivate(next: ComponentInstruction, prev: ComponentInstruction) {
TweenMax.fromTo($(".title"), 1, {opacity: 0}, {opacity: 1});
return new Promise((res, rej) => setTimeout(() => res(1), 1000));
}
onDeactivate(next: ComponentInstruction, prev: ComponentInstruction) {
TweenMax.fromTo($(".title"), 1, {opacity:1}, {opacity: 0});
return new Promise((res, rej) => setTimeout(() => res(1), 1000));
}
Tenga en cuenta que estoy devolviendo una promesa que ejecuta un setTimeout. Esperamos un segundo para darle a la animación el tiempo suficiente para completarla.
Realmente no me gusta usar setTimeouts, así que también podemos usar Observables, que personalmente me gusta lo mejor.
return Rx.Observable.of(true).delay(1000).toPromise();
Aquí paso un valor aleatorio (verdadero en este caso) y lo retraso un segundo y finalmente lo lanzo a Promise. Sí, termina siendo una promesa pero no la uso directamente.
Aquí hay un plnkr con un ejemplo de trabajo (esperando ser lo que estás buscando).
PD: Si a veces se queja de que no puede encontrar una ruta a Rx, solo sigue refrescando hasta que funcione (agregué Rx.js manualmente y es un poco pesado para plnkr).
En Angular 1.x podemos usar ngAnimate para detectar cuándo nos vamos o entramos a una ruta en particular. Además, podemos aplicarles comportamientos:
animateApp.animation(''.myElement'', function(){
return {
enter : function(element, done) {
//Do something on enter
},
leave : function(element, done) {
//Do something on leave
}
};
)};
Resultando en un producto como este: http://embed.plnkr.co/uW4v9T/preview
Me gustaría hacer algo similar con Angular 2.0 y siento que estoy bastante cerca ...
Así que aquí va, he creado un enrutador simple en el componente principal de la aplicación que controla la navegación entre el hogar y los componentes.
import { bootstrap, bind, Component, provide, View } from ''angular2/angular2'';
import {RouteConfig, RouteParams, ROUTER_DIRECTIVES, ROUTER_PROVIDERS, APP_BASE_HREF, ROUTER_BINDINGS} from ''angular2/router''
/////////////////////////////////////////////////////////////////
// Home Component Start
/////////////////////////////////////////////////////////////////
@Component({
selector: ''home-cmp''
})
@View({
template: `
<h2 class="title">Home Page</h2>
`
})
class HomeCmp implements OnActivate, onDeactivate{
onActivate(next: ComponentInstruction, prev: ComponentInstruction) {
console.log("Home Page - initialized");
}
onDeactivate(next: ComponentInstruction, prev: ComponentInstruction) {
console.log("Home Page - destroyed");
}
}
/////////////////////////////////////////////////////////////////
// Home Component End
/////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////
// About Component Start
/////////////////////////////////////////////////////////////////
@Component({
selector: ''about-cmp''
})
@View({
template: `
<h2 class="title">About Page</h2>
`
})
class AboutCmp implements OnActivate, onDeactivate {
onActivate(next: ComponentInstruction, prev: ComponentInstruction) {
console.log("About Page - initialized");
}
onDeactivate(next: ComponentInstruction, prev: ComponentInstruction) {
console.log("About Page - destroyed");
}
}
/////////////////////////////////////////////////////////////////
// About Component End
/////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////
// Main Application Componenent Start
/////////////////////////////////////////////////////////////////
@Component({
selector: ''my-app''
})
@View({
template: `
<div>
<h1>Hello {{message}}!</h1>
<a [router-link]="[''./HomeCmp'']">home</a>
<a [router-link]="[''./AboutCmp'']">about</a>
<hr>
<router-outlet></router-outlet>
</div>
`,
directives: [ROUTER_DIRECTIVES]
})
@RouteConfig([
{path: ''/'', component: HomeCmp, as: ''HomeCmp''},
{path: ''/about'', component: AboutCmp, as: ''AboutCmp''}
])
export class App {
}
/////////////////////////////////////////////////////////////////
// Main Application Componenent End
/////////////////////////////////////////////////////////////////
bootstrap(App, [
ROUTER_BINDINGS,
ROUTER_PROVIDERS,
ROUTER_DIRECTIVES,
provide(APP_BASE_HREF, {useValue: ''/''})
])
Por el momento, puedo capturar cuando el enrutador ha instanciado o destruido un componente en particular cuando se mueve de uno a otro. Esto es genial, pero cuando se destruye el componente anterior , no puedo aplicar una animación de transición de licencia antes de que se inicialice el siguiente componente.
class HomeCmp implements OnActivate, onDeactivate{
onActivate(next: ComponentInstruction, prev: ComponentInstruction) {
//This works
TweenMax.fromTo($(".title"), 1, {opacity: 0}, {opacity: 1});
}
onDeactivate(next: ComponentInstruction, prev: ComponentInstruction) {
//This get ignored
TweenMax.fromTo($(".title"), 1, {opacity: 0}, {opacity: 1});
}
}
Parece que hay una solución a esto usando promesas. La vista previa API de Angular.io indica:
Si onDeactivate devuelve una promesa, el cambio de ruta esperará hasta que se cumpla la promesa.
y
Si onActivate devuelve una promesa, el cambio de ruta esperará hasta que se cumpla la promesa de instanciar y activar los componentes secundarios.
https://angular.io/docs/ts/latest/api/
Soy súper nuevo en lo que respecta a las promesas, así que mezclé todo esto en mi código, lo que resolvió el problema de la destrucción de mi componente actual al inicializar el siguiente, pero nunca se destruye, solo crea una nueva instancia. Cada vez que vuelvo a ella, creará una nueva instancia que generará múltiples copias.
onDeactivate(next: ComponentInstruction, prev: ComponentInstruction) {
function ani(){
TweenMax.fromTo($(".title"), 1, {opacity: 1}, {opacity: 0});
}
var aniPromise = ani();
aniPromise.then(function (ani) {
ani();
});
}
Entonces, para recapitular, el enrutador debe poder esperar a que el componente actual termine su negocio antes de destruirlo e inicializar el siguiente componente.
¡Espero que todo tenga sentido y realmente aprecio la ayuda!
Solución final angular 2:
En pocas palabras, podemos utilizar la @routeAnimation incorporada @routeAnimation para lograr esto. Cada uno de nuestros componentes que representan una ruta secundaria estará decorado con algo como:
@Component({
selector: ''app-pageone''
host: { ''[@routeAnimation]'': ''true'' },
styles: ['':host { width: 300px; display: block; position: absolute; }'']
animations: [
trigger(''routeAnimation'', [
state(''*'', style({transform: ''translateX(0)'', opacity: 1})),
transition(''void => *'', [
style({transform: ''translateX(-100%)'', opacity: 0}),
animate(''0.5s cubic-bezier(0.215, 0.610, 0.355, 1.000)'')
]),
transition(''* => void'',
animate(''0.5s cubic-bezier(0.215, 0.610, 0.355, 1.000)'', style({
transform: ''translateX(100%)'',
opacity: 0
}))
)
])
]
})