我试图编写一个appHeaderResize
指令来衡量<app-online-header>
组件和<app-navigation>
组件的高度。这是代码:
<div class="sticky" appHeaderResize>
<app-online-header></app-online-header>
<app-navigation></app-navigation>
</div>
但我仍然坚持如何访问指令中两个组件的高度。如何从指令中访问这些组件的高度?
答案 0 :(得分:2)
如果您只需要指令中DOM元素的高度,则可以注入ElementRef
并使用它来查询DOM子元素。然后使用Renderer2
,您可以为元素设置样式,属性等,或访问它们的属性:
@Directive({
selector: '[appHeaderResize]'
})
export class AppHeaderResizeDirective {
constructor(
private el: ElementRef,
private renderer: Renderer2
) {}
ngAfterViewInit() {
const arr = Array.from(this.el.nativeElement.childNodes);
const appHeader = arr.find(node => node.tagName === 'APP-HEADER');
this.renderer.setStyle(appHeader, 'display', 'block');
this.renderer.setStyle(appHeader, 'color', 'red');
this.renderer.setStyle(appHeader, 'border', '2px solid red');
this.renderer.setStyle(appHeader, 'height', '200px');
this.renderer.setStyle(appHeader, 'width', '200px');
console.log(appHeader.style.height); // 200px
}
}
(注意:除了基于tagName
查找之外,还有其他方法可以获取您想要的节点(并且这些方式不依赖于字符串模式匹配xD)。我只是使用该方法进行证明概念。)
但是,如果您想获得组件本身,则需要使用ViewChild
并将元素嵌套在实际组件中。
@Component({
selector: 'app-header-resize',
template: `
<app-header></app-header>
`
})
export class AppHeaderResizeComponent implements AfterViewInit {
@ViewChild(AppHeaderComponent) appHeader: AppHeaderComponent;
@ViewChild(AppHeaderComponent, {read: ElementRef}) appEl: ElementRef;
constructor(private renderer: Renderer2) {}
ngAfterViewInit() {
console.log(this.appHeader);
const height = this.appHeader.height + 'px';
this.renderer.addClass(this.appEl.nativeElement, 'square');
this.renderer.setStyle(this.appEl.nativeElement, 'display', 'block');
this.renderer.setStyle(this.appEl.nativeElement, 'height', height);
this.renderer.setStyle(this.appEl.nativeElement, 'border', '2px solid blue');
}
}
以下是两种方法的工作应用:https://stackblitz.com/edit/app-header-child。