class

Una referencia a una aplicación angular que se ejecuta en una página.

classApplicationRef Type<C>, rootSelectorOrNode?:any): ComponentRef<C>tick():voidattachView(viewRef: ViewRef):voiddetachView(viewRef: ViewRef):void

Propiedades

Propiedad Descripción
componentTypes: Type[] Solo lectura

Obtenga una lista de los tipos de componentes registrados en esta aplicación. Esta lista se completa incluso antes de que se cree el componente.
components: ComponentRef[] Solo lectura

Obtenga una lista de componentes registrados en esta aplicación.
isStable: Observable Solo lectura

Devuelve un Observable que indica cuándo la aplicación es estable o inestable.

Ver también:

  • Notas de uso para ejemplos y advertencias al usar esta API.
viewCount Solo lectura

Devuelve el número de vistas adjuntas.

Métodos

oreja()

Inicie un nuevo componente en el nivel raíz de la aplicación.

bootstrap(componentOrFactory: ComponentFactory | Type, rootSelectorOrNode?: any): ComponentRef

Parámetros
componentOrFactory ComponentFactory | Type
rootSelectorOrNode any

Opcional. El valor predeterminado es undefined.
Devoluciones

ComponentRef

Notas de uso

Proceso de arranque

Al iniciar un nuevo componente raíz en una aplicación, Angular monta el componente de la aplicación especificado en los elementos DOM identificados por el selector de componentType e inicia la detección automática de cambios para finalizar la inicialización del componente.

Opcionalmente, un componente se puede montar en un elemento DOM que no coincide con el selector de componentType.

Ejemplo
@Component(selector:'my-app', template:'Hello World')classMyAppconst myPlatformFactory =createPlatformFactory(platformBrowserDynamic,'myPlatform');myPlatformFactory().bootstrapModule(MyApp);
garrapata()

Invoque este método para procesar explícitamente la detección de cambios y sus efectos secundarios.

tick(): void

Parámetros

No hay parámetros.

Devoluciones

void

En modo de desarrollo, tick() también realiza un segundo ciclo de detección de cambios para garantizar que no se detecten más cambios. Si se detectan cambios adicionales durante este segundo ciclo, las vinculaciones en la aplicación tienen efectos secundarios que no se pueden resolver en una sola pasada de detección de cambios. En este caso, Angular arroja un error, ya que una aplicación Angular solo puede tener una pasada de detección de cambios durante la cual deben completarse todas las detecciones de cambios.
attachView ()

Adjunta una vista para que esté sucia marcada. La vista se separará automáticamente cuando se destruya. Esto arrojará si la vista ya está adjunta a un ViewContainer.

attachView(viewRef: ViewRef): void

Parámetros
viewRef ViewRef
Devoluciones

void
detachView ()

Vuelve a separar una vista de la comprobación sucia.

detachView(viewRef: ViewRef): void

Parámetros
viewRef ViewRef
Devoluciones

void

Notas de uso

Ejemplos y advertencias de isStable

Tenga en cuenta dos puntos importantes sobre isStable, demostrado en los ejemplos siguientes:

  • la aplicación nunca será estable si inicia cualquier tipo de tarea asíncrona recurrente cuando se inicia la aplicación (por ejemplo, para un proceso de sondeo, iniciado con un setInterval, a setTimeout o usando operadores RxJS como interval);
  • los isStable Corridas observables fuera de la zona angular.

Imaginemos que inicia una tarea recurrente (aquí incrementando un contador, usando RxJS interval), y al mismo tiempo suscribirse a isStable.

constructor(appRef: ApplicationRef) 
  appRef.isStable.pipe(
     filter(stable => stable)
  ).subscribe(() => console.log('App is stable now');
  interval(1000).subscribe(counter => console.log(counter));

En este ejemplo, isStable nunca emitirá true, y la traza “La aplicación es estable ahora” nunca se registrará.

Si desea ejecutar algo cuando la aplicación es estable, debe esperar a que la aplicación sea estable antes de comenzar su proceso de sondeo.

constructor(appRef: ApplicationRef) 
  appRef.isStable.pipe(
    first(stable => stable),
    tap(stable => console.log('App is stable now')),
    switchMap(() => interval(1000))
  ).subscribe(counter => console.log(counter));

En este ejemplo, la traza “La aplicación es estable ahora” se registrará y luego el contador comenzará a incrementarse cada segundo.

Tenga en cuenta también que este Observable se ejecuta fuera de la zona angular, lo que significa que el código en la suscripción a este Observable no activará la detección de cambios.

Imaginemos que en lugar de registrar el valor del contador, actualiza un campo de su componente y lo muestra en su plantilla.

constructor(appRef: ApplicationRef) 
  appRef.isStable.pipe(
    first(stable => stable),
    switchMap(() => interval(1000))
  ).subscribe(counter => this.value = counter);

Como el isStable Corridas observables fuera de la zona, la value El campo se actualizará correctamente, pero la plantilla no se actualizará.

Deberá activar manualmente la detección de cambios para actualizar la plantilla.

constructor(appRef: ApplicationRef, cd: ChangeDetectorRef) 
  appRef.isStable.pipe(
    first(stable => stable),
    switchMap(() => interval(1000))
  ).subscribe(counter => 
    this.value = counter;
    cd.detectChanges();
  );

O haga que la devolución de llamada de suscripción se ejecute dentro de la zona.

constructor(appRef: ApplicationRef, zone: NgZone) 
  appRef.isStable.pipe(
    first(stable => stable),
    switchMap(() => interval(1000))
  ).subscribe(counter => zone.run(() => this.value = counter));