Angular 2 - Beta 16 @ViewChild,loadNextToLocation 试图将一个组件动态加载到另一个组件中?
Angular 2 - Beta 16 @ViewChild, loadNextToLocation trying to load a component inside another one dynamically?
我正在尝试将组件动态加载到另一个它之前工作的组件中,但是当更新到 beta 16 时它停止了。我阅读了更改日志并更改了我的代码,但仍然没有成功。
我登录是为了控制我从@ViewChild 得到的信息我想得到一个 ViewContainerRef 但我得到了导致错误的 ElementRef。
如何解决这个问题
请查看我的控制台日志的代码和屏幕截图
export class ChildWindowComponent implements OnInit{
public contentType: Type;
public childProps: ChildWindowVm;
@Output() okActionEvent = new EventEmitter<any>();
@Output() cancelActionEvent = new EventEmitter<any>();
@ViewChild('childContentPlace') childContentPlace: ViewContainerRef;
constructor(private dcl: DynamicComponentLoader) {
console.log(this.childContentPlace);
}
ngAfterViewInit() {
console.log(this.childContentPlace);
this.dcl.loadNextToLocation(this.contentType, this.childContentPlace).then((tempComp) => {
tempComp.instance.childVm = this.childProps.childContent;
});
}
ngOnInit() {
}
okClicked(e:any) {
this.okActionEvent.emit(null);
}
cancelClicked(e:any) {
this.cancelActionEvent.emit(null);
}
}
HTML代码
<div>
<div class="child-window-block" >
</div>
<div class="child-window child-window-size" [style.width.px]="childProps.width" [style.height.px]="childProps.height" [style.top.px]="childProps.top" [style.left.px]="childProps.left">
<div class="display-flex flex-direction-col fill-parent">
<div [style.height.px]="childProps.titleHeight">
<div class="child-window-header display-flex flex-item-center">
<div class="flex-grow-1">
<h3>
{{childProps.title}}
</h3>
</div>
</div>
</div>
<div class="div-sep"></div>
<div class="flex-grow-1 fill-parent" style="overflow-y: auto; overflow-x: hidden;">
<div class="child-window-content flex-grow-1" style="height: calc(100% - 42px);">
<div #childContentPlace></div>
<div>
<div class="text-right">
<input type="submit" value="Ok" class="child-window-btn" (click)="okClicked()" />
<input type="button" value="Cancel" class="child-window-btn" (click)="cancelClicked()" />
</div>
</div>
</div>
</div>
</div>
</div>
<div class="child-window-back child-window-size" [style.width.px]="childProps.width" [style.height.px]="childProps.height" [style.top.px]="childProps.top" [style.left.px]="childProps.left">
</div>
你需要告诉 @ViewChild()
要做什么 return
@ViewChild('childContentPlace',
{read: ViewContainerRef}) childContentPlace: ViewContainerRef;
我正在尝试将组件动态加载到另一个它之前工作的组件中,但是当更新到 beta 16 时它停止了。我阅读了更改日志并更改了我的代码,但仍然没有成功。
我登录是为了控制我从@ViewChild 得到的信息我想得到一个 ViewContainerRef 但我得到了导致错误的 ElementRef。 如何解决这个问题
请查看我的控制台日志的代码和屏幕截图
export class ChildWindowComponent implements OnInit{
public contentType: Type;
public childProps: ChildWindowVm;
@Output() okActionEvent = new EventEmitter<any>();
@Output() cancelActionEvent = new EventEmitter<any>();
@ViewChild('childContentPlace') childContentPlace: ViewContainerRef;
constructor(private dcl: DynamicComponentLoader) {
console.log(this.childContentPlace);
}
ngAfterViewInit() {
console.log(this.childContentPlace);
this.dcl.loadNextToLocation(this.contentType, this.childContentPlace).then((tempComp) => {
tempComp.instance.childVm = this.childProps.childContent;
});
}
ngOnInit() {
}
okClicked(e:any) {
this.okActionEvent.emit(null);
}
cancelClicked(e:any) {
this.cancelActionEvent.emit(null);
}
}
HTML代码
<div>
<div class="child-window-block" >
</div>
<div class="child-window child-window-size" [style.width.px]="childProps.width" [style.height.px]="childProps.height" [style.top.px]="childProps.top" [style.left.px]="childProps.left">
<div class="display-flex flex-direction-col fill-parent">
<div [style.height.px]="childProps.titleHeight">
<div class="child-window-header display-flex flex-item-center">
<div class="flex-grow-1">
<h3>
{{childProps.title}}
</h3>
</div>
</div>
</div>
<div class="div-sep"></div>
<div class="flex-grow-1 fill-parent" style="overflow-y: auto; overflow-x: hidden;">
<div class="child-window-content flex-grow-1" style="height: calc(100% - 42px);">
<div #childContentPlace></div>
<div>
<div class="text-right">
<input type="submit" value="Ok" class="child-window-btn" (click)="okClicked()" />
<input type="button" value="Cancel" class="child-window-btn" (click)="cancelClicked()" />
</div>
</div>
</div>
</div>
</div>
</div>
<div class="child-window-back child-window-size" [style.width.px]="childProps.width" [style.height.px]="childProps.height" [style.top.px]="childProps.top" [style.left.px]="childProps.left">
</div>
你需要告诉 @ViewChild()
要做什么 return
@ViewChild('childContentPlace',
{read: ViewContainerRef}) childContentPlace: ViewContainerRef;