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

【问题标题】：Writing custom directive for adjusting height编写用于调整高度的自定义指令
【发布时间】：2018-03-02 04:55:44
【问题描述】：

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

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

但是，我不知道如何访问指令中两个组件的高度。如何从指令中访问这些组件的高度？

【问题讨论】：

你需要一个组件来访问子组件。 @ViewChild(AppOnlineHeaderComponent) header: AppOnlineHeaderComponent;

标签： angular angular-directive

【解决方案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。

【讨论】：

很高兴我能帮上忙 :)