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

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 and use it to query the DOM children. Then using 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。

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

Writing custom directive for adjusting height

angular-directive

angular