Question

现在已经弃用了ComponentResolver，有人可以帮助将此代码转换为rc.5吗？

getObject(4)

这是我走了多远......还没有运气

   const url = 'https://raw.githubusercontent.com/born2net/ng2Boilerplate/master/src/comps/app2/notes/LoadMeComp.ts';
        const importer = url => Observable.fromPromise(System.import(url));
        const resolve = comp => Observable.fromPromise(this.compResolver.resolveComponent(comp));
        importer(url)
            .switchMap(comp => resolve(comp['LoadMeComp']))
            .subscribe(factory
       => this.putStuffHere.createComponent(factory))

plunkr正在进行中：http://plnkr.co/edit/Lxsc5XgdBiiGAy47dUxc?p=preview

Answer 1

使用here类

而不是public void checkPassword() { System.out.println(confirmPassword); } 使用this.resolver.resolveComponentFactory(type)

因为compileComponentAsync是一个承诺，你必须使用this.compiler.compileComponentAsync(type).then((cmpFactory))=>{...})才能获得工厂

Compiler

Answer 2

找到解决方案：

import { Compiler,Component, ViewContainerRef, ViewChild} from '@angular/core';
import {HelloComponent} from './hello.component'
import 'rxjs/add/observable/fromPromise';
import { Observable } from 'rxjs/Observable';

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Dynamicaly Add Elements</h2>
      <button (click)="addItem()">add hello</button>
      <div #placeholder></div>
    </div>
  `,
  providers: [

  ]
})
export class AppComponent { 

  @ViewChild('placeholder', {read: ViewContainerRef}) viewContainerRef;
  private componentFactory: any;

  constructor(public compiler:Compiler) {  
    const url = 'https://raw.githubusercontent.com/born2net/ng2Boilerplate/master/src/comps/app2/notes/LoadMeComp.ts';
    const importer = url => Observable.fromPromise(System.import(url));

    importer(url).subscribe((component) => {
      this.componentFactory = this.compiler.compileComponentSync(component['LoadMeComp']);
    });
  }

  addItem () {
    this.viewContainerRef.createComponent(this.componentFactory, 0);
  }
}

Angular2：将动态组件加载从rc.4转换为rc5

2 个答案: