编写用于调整高度的自定义指令

Question

我正在尝试编写一个appHeaderResize指令来测量<app-online-header>组件和<app-navigation>组件的高度。这是代码：

  <div class="sticky" appHeaderResize>
    <app-online-header></app-online-header>
    <app-navigation></app-navigation>
  </div>

但是我仍然坚持如何访问指令中两个组件的高度。如何从指令中访问这些组件的高度？

Answer 1

如果您只需要指令中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。