Question

我遇到了一个问题，如果我动态加载一个组件，模板中没有任何绑定对我有效。除此之外，永远不会触发ngOnInit方法。

loadView() {
    this._dcl.loadAsRoot(Injected, null, this._injector).then(component => {
      console.info('Component loaded');
    })
  }

动态加载的组件

import {Component, ElementRef, OnInit} from 'angular2/core'

declare var $:any

@Component({
    selector: 'tester',
    template: `
      <h1>Dynamically loaded component</h1>
        <span>{{title}}</span>
    `
})

export class Injected implements OnInit {

    public title:string = "Some text"

    constructor(){} 

    ngOnInit() {
      console.info('Injected onInit');
    }

}

这是我第一次使用动态加载的组件，所以我认为可能会尝试错误地实现它。

这是展示问题的plunkr。任何帮助将不胜感激。

Answer 1

正如Eric Martinez所指出的，这是一个与使用loadAsRoot相关的已知错误。建议的解决方法是使用loadNextToLocation或loadIntoLocation。

对我来说这是有问题的，因为我尝试动态加载的组件是来自具有fixed css定位的组件内部的模态对话框。我还希望能够从任何组件加载模态并将其注入到DOM中的相同位置，而不管它是从哪个组件动态加载。

我的解决方案是使用forwardRef将我的根AppComponent注入到想要动态加载我的模态的组件中。

constructor (
    .........
    .........
    private _dcl: DynamicComponentLoader,
    private _injector: Injector,
    @Inject(forwardRef(() => AppComponent)) appComponent) {

    this.appComponent = appComponent;
}

在我的AppComponent我有一个方法可以返回应用的ElementRef

@Component({
    selector: 'app',
    template: `
        <router-outlet></router-outlet>
        <div #modalContainer></div>
    `,
    directives: [RouterOutlet]
})

export class AppComponent {

    constructor(public el:ElementRef) {}

    getElementRef():ElementRef {
        return this.el;
    }

}

回到我的另一个组件（我想动态加载模态的组件），我现在可以调用：

this._dcl.loadIntoLocation(ModalComponent, this.appComponent.getElementRef(), 'modalContainer').then(component => {
    console.log('Component loaded')
})

也许这会帮助其他有类似问题的人。

Answer 2

无需从DOM清除组件实例。使用angular2 / core包中的'componentRef'来创建和配置组件实例。使用show（）在所需位置加载模态组件，并使用hide（）在第二次调用loadIntoLocation之前处理组件实例。

例如：

@Component({
  selector: 'app',
  template: `
    <router-outlet></router-outlet>
    <div #modalContainer></div>
 `,
  directives: [RouterOutlet]
})
export class AppComponent {
  private component:Promise<ComponentRef>;

  constructor(public el:ElementRef) {}

  getElementRef():ElementRef {
    return this.el;
  }

  show(){
    this.component = this._dcl.loadIntoLocation(ModalComponent,this.appComponent.getElementRef(), 'modalContainer').then(component => {console.log('Component loaded')})
  }

  hide(){
    this.component.then((componentRef:ComponentRef) => {
      componentRef.dispose();
      return componentRef;
    });
  }
}

绑定在动态加载的组件

2 个答案: