时间戳

首页 > 解决方案 > 从指令中获取价值以供将来使用

angular - 从指令中获取价值以供将来使用

问题描述

我试图在窗口底部固定一个工具栏，但是当我向下滚动时，其他组件会一直在它上面。我想出的解决方案是获取工具栏的高度，并在边距/填充底部为“其他组件”提供该值。所以它永远不会超过它。

获取高度指令.ts

import { Directive, ElementRef, OnInit } from '@angular/core';
import { EventEmitter } from '../../../../node_modules/protractor';

@Directive({
  selector: '[appGetHeight]'
})

export class GetHeightDirective implements OnInit{
  constructor(public el: ElementRef) {}

  ngOnInit() {
    let styles = getComputedStyle(this.el.nativeElement);
    console.log(styles.height);
  }

}

我将该指令应用于此：

在哪里申请directive.html

    <div appGetHeight class="col">
      <p >Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto ipsum repellat illum corporis, possimus consequatur qui nisi ipsa in. Molestiae, dolor. Fugit, eum quas. Provident neque id optio facilis velit.</p>
    </div>

有了这个，我得到了工具栏的高度console.log，上面写着类似66.8px. 我现在想使用“100px”来设置兄弟组件元素的底部边距，但我找不到任何解决方案。

谢谢您的帮助。

标签： angulartypescript

解决方案

要访问指令的实例，请考虑使用 exportAs 变量。你可以在这里做一些进一步的阅读：

https://netbasal.com/angular-2-take-advantage-of-the-exportas-property-81374ce24d26

摘要： 通过导出，您可以获得对组件指令的访问权限。要获得这样的访问权限，您需要将 exportAs 添加到 @Directive 装饰器并为其命名。

要将指令保存到父视图的变量中，您可以使用以下语法：

这是您的代码示例：

@Directive({
  selector: '[appGetHeight]',
  exportAs: 'heightDirective'
})
export class GetHeightDirectiveDirective implements OnInit {
  public styles: CSSStyleDeclaration;

  constructor(public el: ElementRef) {
  }

  ngOnInit() {
    this.styles = getComputedStyle(this.el.nativeElement);
    console.log(this.styles.height);
  }

}

笔记：

  1. 我将样式更改为 this.styles 否则该变量将在 ngOnInit 之后被删除，因为 let 是一个块范围的变量。

  2. 看看第三行的“exportAs”。

用法：

<div appGetHeight #varWithDirective="heightDirective">Test</div>

<div class="login-background" [style.margin-bottom]="varWithDirective.styles.height" >

请注意这里的 #varWithDirective="heightDirective" heightDirective 必须代表 exportAs 名称。然后我可以访问变量#varWithDirective 中指令的所有值。

我希望这可以帮助你。

重要提示：您所要求的肯定可以用不同的方法来解决。用 JavaScript 解决 CSS 问题是不好的做法。但为此，我需要更多信息。

考虑使用：z-index / position fixed，也许还有 css-grid。

推荐阅读