javascript - 绑定(bind)在动态加载的组件中不起作用

Question

我遇到了一个问题，如果我动态加载一个组件，模板中的所有绑定(bind)都不适合我。除此之外，永远不会触发 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 定位。我还希望能够从任何组件加载模式并将其注入(inject) DOM 中的相同位置，而不管它是从哪个组件动态加载的。

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

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

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