绑定在动态加载的组件中不起作用

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

}

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

这是一个证明这个问题的傻瓜.任何帮助,将不胜感激.

Answer 1

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

对我来说这是有问题的,因为我试图动态加载的组件是一个带有fixedcss定位的组件内部的模态对话框.我还希望能够从任何组件加载模态并将其注入到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')
})

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