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

我遇到了一个问题，如果我动态加载一个组件，模板中的任何绑定都不能为我工作。除此之外，

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

}

从'angular2/core'导入{Component，ElementRef，OnInit}
声明变量$：any
@组成部分({
选择器：“测试器”，
模板：`
动态加载组件
{{title}}
`
})
导入的导出类实现了OnInit{
公共标题：string=“一些文本”
构造函数（）{}
恩戈尼尼特（）{
console.info（'Injected onInit'）；
}
}

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

这里有一个例子来说明这个问题。任何帮助都将不胜感激。

如前所述，这是一个与

loadAsRoot

使用相关的已知错误。建议的解决方法是使用

loadNextToLocation

或

loadIntoLocation

对我来说，这是有问题的，因为我试图动态加载的组件是一个模式对话框，它位于

fixed

css定位的组件内部。我还希望能够从任何组件加载模态，并将其注入DOM中的相同位置，而不管从哪个组件动态加载模态

我的解决方案是使用

forwardRef

将我的根

AppComponent

注入到想要动态加载我的modal的组件中

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

}

---

这可能会帮助其他人解决类似的问题。

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

例如：

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

@组件({
选择器：“应用程序”，
模板：`
`,
指令：[路由输出]
})
导出类AppComponent{
私人部分：承诺；
构造函数（public el:ElementRef）{}
getElementRef（）：ElementRef{
归还这个.el；
}
show（）{
this.component=this.\u dcl.loadIntoLocation（ModalComponent，this.appComponent.getElementRef（），'modalContainer'）。然后（component=>{console.log（'component-loaded'））
}
隐藏（）{
this.component.then（（componentRef:componentRef）=>{
componentRef.dispose（）；
返回组件REF；
});
}
}

有一个已知的with

loadAsRoot

。目前最安全的方法是使用

loadnextotocation

或

loadintocation

@EricMartinez。我试图加载的组件是一个模式对话框。我试图从中加载它的组件位于一个具有

固定的
css样式的元素中，因此该对话框需要作为
主体
标记的第一个子元素加载。我可以从深度嵌套的组件中使用
loadNextToLocation
或
loadIntoLocation
来实现这一点吗？我认为您可以使用纯CSS来解决这一问题。如果您将每个位置都设置为0（上、左、右、下），位置固定且z索引值较高，则无论加载到何处，您都可以创建一个模态对话框。@EricMartinez我很感激，但我不想因为这个错误而胡乱处理对我来说很好的CSS。我决定用forward ref传递根
AppComponent
，现在用
AppComponent
的
ElementRef
使用
loadintocation
。谢谢您的帮助。您可以添加您的解决方案作为答案，可能对其他人有帮助。当我尝试时，
LoadInLocation
将在引用的标记下附加新组件（在您的示例中，在
modalContainer
div下。问题是，当我两次调用此选项时，组件将与先前创建的组件（最新组件位于顶部）堆叠在一起）。我想要的是像
loadAsRoot
这样的行为，第二次调用将替换以前的组件。在第二次调用
LoadInLocation
之前是否手动清理DOM？我在哪里找到
@Inject
文档？在angular 2文档中尚不可用…子组件已加载，但ngOnInit或动态加载组件的ngAfterViewInit方法只有在我执行mousemove时才被调用。你们有人遇到过这个问题吗？
@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;
    });
  }
}