ApplicationRef

ApplicationRef有三个作用
* 可以通过appRef.tick()来全局性调用变化检测
* 可以将视图用attachView()包含到变化检测中 用detachView()将视图移除变化检测
* 利用componentTypes和components提供了一个注册组件和组件类型的列表，和一些其他变更检测的相关信息

---

ApplicationRef包含对根视图的引用，可用于使用tick功能手动运行变化检测
应用之一为：如果是用根节点（root node）创建的一个动态创建组件，用attachView为其添加变化检测

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);  }

---

不用ViewContainerRef，动态插入一个组件到一个特定的DOM节点 该怎么做？

译文出自这里

问题：
假定有两个空白的组件

@Component({      template: `        <div id="container">          <h1>My Component</h1>        </div>       `,      selector: 'my-app'  })  export class AppComponent { }  @Component({      template: '<p>{{text}}</p>',      selector: 'simple-cmp'  })  export class SimpleComponent { public text='Hello World!' }

我打算插入一个div到组件一中

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

组件一的模板现在变为

 <div id="container">      <h1>My Component</h1>      <div id="placeholder"></div> </div>

我期待的结果为

 <div id="container">      <h1>My Component</h1>      <div id="placeholder">        <simple-cmp>Hello world!</simple-cmp>      </div> </div>

我想做的就是动态添加SimpleComopent实例到#placeholder div中

答案：
1 创建一个组件指向它需要添加的根节点上
2 attach这个视图 用 ApplicationRef以便于你能够变化检测。你仍然没有Input和ngOnChanges操作，但是更新DOM应该没有问题了

@Component({      template: `        <div id="container">          <h1>My Component</h1>        </div>       `,      selector: 'my-app'  })  export class AppComponent {       constructor(private resolver: ComponentFactoryResolver,                  private injector: Injector,                  private app: ApplicationRef) {       }      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);      }  }

最后给出再给出一个例子

@Component({    selector: ‘aaa‘,    template: ``})export class AAAComponent implements OnInit, AfterContentInit {    constructor(        private vcr: ViewContainerRef,        private cfr: ComponentFactoryResolver    ) { }    @ContentChildren("dynamic", { read: ElementRef }) elem: QueryList<ElementRef>  //read 的作用是强转类型    ngOnInit() {    }    ngAfterContentInit() {                           let providers = ReflectiveInjector.resolve([AbcService]); //为组件添加 providers        let injector = ReflectiveInjector.fromResolvedProviders(providers, this.vcr.parentInjector); //创建注入器给 component (记得要继承哦)        let factory = this.cfr.resolveComponentFactory(AbcComponent); //创建 component 工厂        let component = factory.create(injector,[[this.elem.first.nativeElement],[this.elem.last.nativeElement] ]); //创建 component, 这是就把注入器放进了, 后面的 array 是给 ng-content 用的        component.instance.name = "keatkeat"; // 对 input, output 做点东西         this.vcr.insert(component.hostView, 0); // 插入到模板中  0 是 position, 如果是 0 其实可以不用放.         // 如果不需要设定 providers 的话，可以省略一些 :         // let factory = this.resolver.resolveComponentFactory(AbcComponent);          // let component = this.vcr.createComponent(factory, 0);        // component.instance.name = "keatkeat";       }}

再提一下变化检测
ApplicationRef.tick() - 检查所有组件树
NgZone.run(callback) - zone的ng实现
ChangeDetectorRef.detectChanges() - 仅检查组件和其子组件

//Import NgZone:import { Component, NgZone } from '@angular/core';//Add it to your class constructorconstructor(public zone: NgZone, ...args){}//Run code with zone.run:this.zone.run(() => this.donations = donations)