我理解你的问题是如何在Angular 8x中解决指令动态父级不占据父级尺寸的问题。下面是一个可能的解决方案:
首先,在你的指令代码中,确保你设置了正确的CSS样式,以使指令元素具有正确的尺寸。
@Directive({
selector: '[myDirective]'
})
export class MyDirective {
constructor(private elementRef: ElementRef, private renderer: Renderer2) {
this.renderer.setStyle(this.elementRef.nativeElement, 'width', '100%');
this.renderer.setStyle(this.elementRef.nativeElement, 'height', '100%');
}
}
在包含指令的父级组件中,使用CSS样式将其设置为具有固定的宽度和高度。
在父级组件中,通过使用ViewContainerRef
和ComponentFactoryResolver
来动态创建子组件,并将其添加到父级容器中。
@Component({
selector: 'my-app',
template: `
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('container', {read: ViewContainerRef}) container: ViewContainerRef;
constructor(private componentFactoryResolver: ComponentFactoryResolver) {}
ngAfterViewInit() {
const componentFactory = this.componentFactoryResolver.resolveComponentFactory(MyComponent);
const componentRef = this.container.createComponent(componentFactory);
}
}
通过以上步骤,你应该能够解决指令动态父级不占据父级尺寸的问题。请注意,这只是一种可能的解决方案,具体取决于你的需求和代码结构。