reactivos - Espere a que Angular 2 cargue/resuelva el modelo antes de representar la vista/plantilla

pasar parametros entre componentes angular 4

Question

En Angular 1.x, UI-Router fue mi herramienta principal para esto. Al devolver una promesa de valores de "resolución", el enrutador simplemente esperaría a que se completara la promesa antes de presentar las directivas.

Alternativamente, en Angular 1.x, un objeto nulo no bloqueará una plantilla, por lo que si no me importa un renderizado temporalmente incompleto, solo puedo usar $digest para renderizar después de la promise.then() llena un objeto modelo inicialmente vacío .

De los dos enfoques, si es posible, preferiría esperar para cargar la vista y cancelar la navegación de ruta si el recurso no se puede cargar. Esto me ahorra el trabajo de "no navegar". EDITAR: Tenga en cuenta que esto significa específicamente que esta pregunta solicita un método de mejor práctica o compatible con futuros de Angular 2 para hacer esto, y pide evitar el "operador de Elvis" si es posible. Por lo tanto, no seleccioné esa respuesta.

Sin embargo, ninguno de estos dos métodos funciona en Angular 2.0. Seguramente hay una solución estándar planificada o disponible para esto. ¿Alguien sabe qué es esto?

@Component() {
template: ''{{cats.captchans.funniest}}''
}
export class CatsComponent {
public cats: CatsModel;
ngOnInit () {
this._http.get(''/api/v1/cats'').subscribe(response => cats = response.json());
}
}

La siguiente pregunta puede reflejar el mismo problema: plantilla de renderizado de Angular 2 después de cargar la PROMESA con datos . Tenga en cuenta que la pregunta no tiene código o respuesta aceptada.

Answer 1

EDITAR: El equipo angular ha lanzado el decorador @Resolve. Todavía necesita algunas aclaraciones sobre cómo funciona, pero hasta entonces tomaré la respuesta relacionada de otra persona aquí y proporcionaré enlaces a otras fuentes:

• StackOverflow: uso de Resolve en rutas Angular2
• StackOverflow: muestra de uso de Günter Zöchbauer
• https://angular.io/docs/ts/latest/api/router/index/Resolve-interface.html
• El parche del enrutador en GitHub
• RC4 ChangeLog
• Lanzamiento de RC4 Tweet

EDITAR: Esta respuesta funciona solo para Angular 2 BETA. El enrutador no se lanzó para Angular 2 RC a partir de esta edición. En su lugar, cuando use Angular 2 RC, reemplace las referencias al router con router-deprecated para continuar usando el enrutador beta.

La forma en que Angular2-future implementará esto será a través del decorador @Resolve. Hasta entonces, el facsímil más cercano es el decorador de componentes CanActivate , según Brandon Roberts. ver https://github.com/angular/angular/issues/6611

Aunque beta 0 no admite proporcionar valores resueltos al Componente, está planeado, y también se describe una solución alternativa aquí: Usar Resolver en rutas Angular2

Un ejemplo beta 1 se puede encontrar aquí: http://run.plnkr.co/BAqA98lphi4rQZAd/#/resolved . Utiliza una solución alternativa muy similar, pero utiliza un poco más de precisión el objeto RouteData lugar de RouteParams .

@CanActivate((to) => {
return new Promise((resolve) => {
to.routeData.data.user = { name: ''John'' }

Además, tenga en cuenta que también hay una solución alternativa para acceder también a los valores "resueltos" de la ruta anidada / principal y otras características que espera si ha utilizado 1.x UI-Router.

Tenga en cuenta que también deberá inyectar manualmente cualquier servicio que necesite para lograr esto, ya que la jerarquía de Inyector angular no está disponible actualmente en el decorador CanActivate. Simplemente importando un inyector creará una nueva instancia de inyector, sin acceso a los proveedores desde bootstrap() , por lo que probablemente querrá almacenar una copia del inyector bootstrap en toda la aplicación. El segundo enlace Plunk de Brandon en esta página es un buen punto de partida: https://github.com/angular/angular/issues/4112

Answer 2

El paquete @angular/router tiene la propiedad Resolve para rutas. Por lo tanto, puede resolver fácilmente los datos antes de representar una vista de ruta.

Ver: https://angular.io/docs/ts/latest/api/router/index/Resolve-interface.html

Ejemplo de documentos a partir de hoy, 28 de agosto de 2017:

class Backend {
fetchTeam(id: string) {
return ''someTeam'';
}
}
@Injectable()
class TeamResolver implements Resolve<Team> {
constructor(private backend: Backend) {}
resolve(
route: ActivatedRouteSnapshot,
state: RouterStateSnapshot): Observable<any>|Promise<any>|any {
return this.backend.fetchTeam(route.params.id);
}
}
@NgModule({
imports: [
RouterModule.forRoot([
{
path: ''team/:id'',
component: TeamCmp,
resolve: {
team: TeamResolver
}
}
])
],
providers: [TeamResolver]
})
class AppModule {}

Ahora su ruta no se activará hasta que los datos se hayan resuelto y devuelto.

Acceso a datos resueltos en su componente

Para acceder a los datos resueltos desde su componente en tiempo de ejecución, hay dos métodos. Entonces, dependiendo de sus necesidades, puede usar:

1. route.snapshot.paramMap que devuelve una cadena o el
2. route.paramMap que devuelve un Observable al que puede .subscribe() .

Ejemplo:

 // the no-observable method
this.dataYouResolved= this.route.snapshot.paramMap.get(''id'');
// console.debug(this.licenseNumber);
// or the observable method
this.route.paramMap
.subscribe((params: ParamMap) => {
// console.log(params);
this.dataYouResolved= params.get(''id'');
return params.get(''dataYouResolved'');
// return null
});
console.debug(this.dataYouResolved);

Espero que eso ayude.

Answer 3

Implemente el routerOnActivate en su @Component y devuelva su promesa:

https://angular.io/docs/ts/latest/api/router/OnActivate-interface.html

EDITAR: Esto NO funciona explícitamente, aunque la documentación actual puede ser un poco difícil de interpretar sobre este tema. Vea el primer comentario de Brandon aquí para obtener más información: https://github.com/angular/angular/issues/6611

EDITAR: La información relacionada en el sitio Auth0, que de otro modo sería exacto, no es correcta: https://auth0.com/blog/2016/01/25/angular-2-series-part-4-component-router-in-depth/

EDITAR: El equipo angular está planeando un decorador @Resolve para este propósito.

Answer 4

Pruebe {{model?.person.name}} esto debería esperar a que el modelo no esté undefined y luego renderizar.

Angular 2 se refiere a esto ?. sintaxis como el operador de Elvis . La referencia a ella en la documentación es difícil de encontrar, así que aquí hay una copia de la misma en caso de que la cambien / muevan:

El operador de Elvis (?.) Y las rutas de propiedad nulas

El operador angular "Elvis" (?.) Es una forma fluida y conveniente de protegerse contra valores nulos e indefinidos en las rutas de propiedad. Aquí está, protegiendo contra una falla de renderizado de vista si el currentHero es nulo.

The current hero''s name is {{currentHero?.firstName}}

Elaboremos el problema y esta solución particular.

¿Qué sucede cuando la siguiente propiedad de título enlazado a datos es nula?

The title is {{ title }}

La vista aún se muestra pero el valor mostrado está en blanco; solo vemos "El título es" sin nada después. Ese es un comportamiento razonable. Al menos la aplicación no se bloquea.

Supongamos que la expresión de la plantilla involucra una ruta de propiedad como en el siguiente ejemplo donde mostramos el nombre de un héroe nulo.

The null hero''s name is {{nullHero.firstName}}

JavaScript arroja un error de referencia nulo y Angular también:

TypeError: Cannot read property ''firstName'' of null in [null]

Peor aún, toda la vista desaparece.

Podríamos afirmar que este es un comportamiento razonable si creemos que la propiedad del héroe nunca debe ser nula. Si nunca debe ser nulo y, sin embargo, es nulo, hemos cometido un error de programación que debe ser detectado y reparado. Lanzar una excepción es lo correcto.

Por otro lado, los valores nulos en la ruta de la propiedad pueden estar bien de vez en cuando, especialmente cuando sabemos que los datos llegarán eventualmente.

Mientras esperamos los datos, la vista debe mostrarse sin quejas y la ruta de la propiedad nula debe mostrarse en blanco al igual que la propiedad del título.

Desafortunadamente, nuestra aplicación se bloquea cuando el currentHero es nulo.

Podríamos codificar ese problema con NgIf

<!--No hero, div not displayed, no error --> <div *ngIf="nullHero">The null hero''s name is {{nullHero.firstName}}</div>

O podríamos intentar encadenar partes de la ruta de propiedad con &&, sabiendo que la expresión se rescata cuando encuentra el primer nulo.

The null hero''s name is {{nullHero && nullHero.firstName}}

Estos enfoques tienen mérito, pero pueden ser engorrosos, especialmente si el camino de la propiedad es largo. Imagine protegerse contra un valor nulo en algún lugar de una ruta de propiedad larga, como abcd

El operador angular "Elvis" (?.) Es una forma más fluida y conveniente de protegerse contra los nulos en las rutas de propiedad. La expresión se rescata cuando alcanza el primer valor nulo. La pantalla está en blanco, pero la aplicación sigue funcionando y no hay errores.

<!-- No hero, no problem! --> <!-- No hero, no problem! --> The null hero''s name is {{nullHero?.firstName}}

Funciona perfectamente con rutas de propiedad largas también:

a?.b?.c?.d

Answer 5

Una buena solución que he encontrado es hacer en la interfaz de usuario algo como:

<div *ngIf="vendorServicePricing && quantityPricing && service">
...Your page...
</div

Solo cuando se vendorServicePricing , quantityPricing y service , se procesa la página.

Answer 6

Establecer un valor local con el observador

... también, no olvide inicializar el valor con datos ficticios para evitar errores uninitialized .

export class ModelService {
constructor() {
this.mode = new Model();
this._http.get(''/api/v1/cats'')
.map(res => res.json())
.subscribe(
json => {
this.model = new Model(json);
},
error => console.log(error);
);
}
}

Esto supone Modelo, es un modelo de datos que representa la estructura de sus datos.

El modelo sin parámetros debe crear una nueva instancia con todos los valores inicializados (pero vacíos). De esa manera, si la plantilla se procesa antes de recibir los datos, no arrojará un error.

Idealmente, si desea conservar los datos para evitar solicitudes http innecesarias, debe colocar esto en un objeto que tenga su propio observador al que pueda suscribirse.