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 constructor
constructor(public zone: NgZone, ...args){}
//Run code with zone.run:
this.zone.run(() => this.donations = donations)