class
A reference to an Angular application running on a page.
class ApplicationRef { componentTypes: Type<any>[] components: ComponentRef<any>[] isStable: Observable<boolean> viewCount bootstrap<C>(componentOrFactory: ComponentFactory<C> | Type<C>, rootSelectorOrNode?: any): ComponentRef<C> tick(): void attachView(viewRef: ViewRef): void detachView(viewRef: ViewRef): void }
Property | Description |
---|---|
componentTypes: Type<any>[] |
Read-Only Get a list of component types registered to this application. This list is populated even before the component is created. |
components: ComponentRef<any>[] |
Read-Only Get a list of components registered to this application. |
isStable: Observable<boolean> |
Read-Only Returns an Observable that indicates when the application is stable or unstable. See also:
|
viewCount |
Read-Only Returns the number of attached views. |
bootstrap() | ||||||
---|---|---|---|---|---|---|
Bootstrap a new component at the root level of the application. | ||||||
|
componentOrFactory | ComponentFactory | |
rootSelectorOrNode | any | Optional. Default is |
When bootstrapping a new root component into an application, Angular mounts the specified application component onto DOM elements identified by the componentType's selector and kicks off automatic change detection to finish initializing the component.
Optionally, a component can be mounted onto a DOM element that does not match the componentType's selector.
@Component({selector: 'my-app', template: 'Hello World'}) class MyApp { } const myPlatformFactory = createPlatformFactory(platformBrowserDynamic, 'myPlatform'); myPlatformFactory().bootstrapModule(MyApp);
tick() |
---|
Invoke this method to explicitly process change detection and its side-effects. |
|
In development mode, |
attachView() |
---|
Attaches a view so that it will be dirty checked. The view will be automatically detached when it is destroyed. This will throw if the view is already attached to a ViewContainer. |
detachView() |
---|
Detaches a view from dirty checking again. |
Note two important points about isStable
, demonstrated in the examples below:
setInterval
, a setTimeout
or using RxJS operators like interval
);isStable
Observable runs outside of the Angular zone.Let's imagine that you start a recurrent task (here incrementing a counter, using RxJS interval
), and at the same time subscribe to isStable
.
constructor(appRef: ApplicationRef) { appRef.isStable.pipe( filter(stable => stable) ).subscribe(() => console.log('App is stable now'); interval(1000).subscribe(counter => console.log(counter)); }
In this example, isStable
will never emit true
, and the trace "App is stable now" will never get logged.
If you want to execute something when the app is stable, you have to wait for the application to be stable before starting your polling process.
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)); }
In this example, the trace "App is stable now" will be logged and then the counter starts incrementing every second.
Note also that this Observable runs outside of the Angular zone, which means that the code in the subscription to this Observable will not trigger the change detection.
Let's imagine that instead of logging the counter value, you update a field of your component and display it in its template.
constructor(appRef: ApplicationRef) { appRef.isStable.pipe( first(stable => stable), switchMap(() => interval(1000)) ).subscribe(counter => this.value = counter); }
As the isStable
Observable runs outside the zone, the value
field will be updated properly, but the template will not be refreshed!
You'll have to manually trigger the change detection to update the template.
constructor(appRef: ApplicationRef, cd: ChangeDetectorRef) { appRef.isStable.pipe( first(stable => stable), switchMap(() => interval(1000)) ).subscribe(counter => { this.value = counter; cd.detectChanges(); }); }
Or make the subscription callback run inside the zone.
constructor(appRef: ApplicationRef, zone: NgZone) { appRef.isStable.pipe( first(stable => stable), switchMap(() => interval(1000)) ).subscribe(counter => zone.run(() => this.value = counter)); }
© 2010–2021 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://v11.angular.io/api/core/ApplicationRef