我遇到了一个问题,如果我动态加载一个组件,模板中的所有绑定(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证明问题。任何帮助将不胜感激。
最佳答案
作为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')
})
也许这会帮助其他有类似问题的人。
关于javascript - 绑定(bind)在动态加载的组件中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34728259/