绑定不是动态加载组件工作 [英] Bindings not working in dynamically loaded component

问题描述

林其中如果我动态加载的部件，没有在模板中的绑定正在为我遇到的一个问题。除了这个 ngOnInit 方法不会被触发。

I'm encountering a problem where if I dynamically load a component, none of the bindings in the template are working for me. As well as this the ngOnInit method is never triggered.

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

}

这是使用动态加载组件，所以我觉得可能试图正确地实现它在我的第一次。

This is my first time using dynamically loaded components so I think may be attempting to implement it incorrectly.

下面是一个 plunkr 展示的问题。任何帮助将是AP preciated。

Here's a plunkr demonstrating the issue. Any help would be appreciated.

推荐答案

马丁内斯指出，这是一个已知的错误与使用 loadAsRoot 的。建议的解决方法是使用 loadNextToLocation 或 loadIntoLocation 。

As Eric Martinez pointed out this is a known bug related to the use of loadAsRoot. The suggested workaround is to use loadNextToLocation or loadIntoLocation.

对我来说这是有问题的部分我试图动态负载是从一个组件内模态对话框与固定 CSS定位。我还希望从任何组件加载模态的能力，并有它注入到DOM中的相同的位置而不管组件它动态地从装载

For me this was problematic as the component I was trying to dynamically load was a modal dialog from inside a component with fixed css positioning. I also wanted the ability to load the modal from any component and have it injected into the same position in the DOM regardless of what component it was dynamically loaded from.

我的解决方案是使用 forwardRef 来注入我的根 AppComponent 成要动态加载我的模态组件

My solution was to use forwardRef to inject my root AppComponent into the component which wants to dynamically load my modal.

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

    this.appComponent = appComponent;
}

在我的 AppComponent 我有它返回一个方法应用程序的 ElementRef

In my AppComponent I have a method which returns the app's 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;
    }

}

回到我的其他组件（即我要动态加载从模态的）我现在可以致电：

Back in my other component (the one that I want to dynamically load the modal from) I can now call:

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

也许这将帮助其他有类似问题。

Perhaps this will help others with similar problems.

这篇关于绑定不是动态加载组件工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！