填寫這份《一分鐘調查》,幫我們(開發組)做得更好!去填寫Home

ApplicationRef

對頁面上執行的 Angular 應用程式的參考。

A reference to an Angular application running on a page.

      
      interface 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
}
    

屬性

屬性說明
componentTypes: Type<any>[]唯讀

獲取註冊到該應用程式的元件型別的列表。在建立元件之前,會填充此列表。

Get a list of component types registered to this application. This list is populated even before the component is created.

components: ComponentRef<any>[]唯讀

獲取已註冊到該應用中的元件的列表。

Get a list of components registered to this application.

isStable: Observable<boolean>唯讀

返回一個 Observable,指示應用程式何時變得穩定或不穩定。

Returns an Observable that indicates when the application is stable or unstable.

參見:

  • 用法說明的例子和使用此 API 時的注意事項。

    Usage notes for examples and caveats when using this API.

viewCount唯讀

返回已附加檢視的數量。

Returns the number of attached views.

方法

在應用程式的根級引導新元件。

Bootstrap a new component at the root level of the application.

bootstrap<C>(componentOrFactory: ComponentFactory<C> | Type<C>, rootSelectorOrNode?: any): ComponentRef<C>
      
      bootstrap<C>(componentOrFactory: ComponentFactory<C> | Type<C>, rootSelectorOrNode?: any): ComponentRef<C>
    
引數
componentOrFactory ComponentFactory | Type
rootSelectorOrNode any
可選. 預設值是 `undefined`.
返回值

ComponentRef<C>

使用說明

引導過程
Bootstrap process

將新的根元件引導到應用程式時,Angular 將指定的應用程式元件安裝到由 componentType 的選擇器標識的 DOM 元素上,並啟動自動變更檢測以完成元件的初始化。

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.

(可選)可以將元件安裝到與 componentType 的選擇器不匹配的 DOM 元素上。

Optionally, a component can be mounted onto a DOM element that does not match the componentType's selector.

例子
Example
@Component({selector: 'my-app', template: 'Hello World'}) class MyApp { } const myPlatformFactory = createPlatformFactory(platformBrowserDynamic, 'myPlatform'); myPlatformFactory().bootstrapModule(MyApp);
      
      @Component({selector: 'my-app', template: 'Hello World'})
class MyApp {
}

const myPlatformFactory = createPlatformFactory(platformBrowserDynamic, 'myPlatform');
myPlatformFactory().bootstrapModule(MyApp);
    

呼叫此方法可以顯式處理變更檢測及其副作用。

Invoke this method to explicitly process change detection and its side-effects.

tick(): void
      
      tick(): void
    
引數

沒有引數。

返回值

void

在開發模式下,tick() 還會執行第二個變更檢測週期,以確保沒有檢測到其他更改。如果在第二個週期內獲取了其他更改,則應用程式中的繫結就會產生副作用,這些副作用無法透過一次變更檢測過程解決。在這種情況下,Angular 就會引發錯誤,因為 Angular 應用程式只能進行一次變更檢測遍歷,在此過程中必須完成所有變更檢測。

In development mode, tick() also performs a second change detection cycle to ensure that no further changes are detected. If additional changes are picked up during this second cycle, bindings in the app have side-effects that cannot be resolved in a single change detection pass. In this case, Angular throws an error, since an Angular application can only have one change detection pass during which all change detection must complete.

附加檢視,以便對其進行髒檢查。檢視銷燬後將自動分離。如果檢視已附加到 ViewContainer,則會丟擲此錯誤。

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.

attachView(viewRef: ViewRef): void
      
      attachView(viewRef: ViewRef): void
    
引數
viewRef ViewRef
返回值

void

再次從髒檢查中分離檢視。

Detaches a view from dirty checking again.

detachView(viewRef: ViewRef): void
      
      detachView(viewRef: ViewRef): void
    
引數
viewRef ViewRef
返回值

void

使用說明

isStable examples and caveats

Note two important points about isStable, demonstrated in the examples below:

  • the application will never be stable if you start any kind of recurrent asynchronous task when the application starts (for example for a polling process, started with a setInterval, a setTimeout or using RxJS operators like interval);
  • the 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)); }
      
      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)); }
      
      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); }
      
      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(); }); }
      
      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)); }
      
      constructor(appRef: ApplicationRef, zone: NgZone) {
  appRef.isStable.pipe(
    first(stable => stable),
    switchMap(() => interval(1000))
  ).subscribe(counter => zone.run(() => this.value = counter));
}