Question

我不理解ApplicationRef类及其用法。拥有“reference to an Angular application running on a page”是什么意思？什么时候需要？

请使用ApplicationRef提供一个小例子。

Answer 1

https://angular.io/api/core/ApplicationRef

允许通过调用appRef.tick()
它允许使用attachView()和detachView()
使用componentTypes和components提供已注册组件和组件类型的列表以及其他一些与变更检测有关的信息

Answer 2

ApplicationRef包含对根视图的引用，可用于使用tick函数手动运行更改检测

调用此方法以显式处理更改检测及其更改   副作用。

在开发模式下，tick（）也会执行第二次更改检测   循环以确保没有检测到进一步的变化。如果有的话   在第二个周期中拾取更改，在应用程序中绑定   具有在单次变化检测中无法解决的副作用   通过。在这种情况下，Angular会抛出一个错误，因为它是一个Angular   应用程序只能有一个更改检测通过，在此期间全部   变更检测必须完成。

以下是一个例子：

@Component()
class C {
   property = 3;
   constructor(app: ApplicationRef, zone: NgZone) {
       // this emulates any third party code that runs outside Angular zone
       zone.runOutsideAngular(()=>{
          setTimeout(()=>{
             // this won't be reflected in the component view
             this.property = 5;

             // but if you run detection manually you will see the changes
             app.tick();
          })
       })

如果使用根节点创建了变更检测，则另一个应用程序是附加动态创建的组件视图：

  addDynamicComponent() {
     let factory = this.resolver.resolveComponentFactory(SimpleComponent);

     let newNode = document.createElement('div');
     newNode.id = 'placeholder';
     document.getElementById('container').appendChild(newNode);

     const ref = factory.create(this.injector, [], newNode);
     this.app.attachView(ref.hostView);
  }

检查this answer了解详情。

在Angular 2+中ApplicationRef的目的是什么？

2 个答案: