Question

我正在尝试将工具栏固定在窗口底部，但是当我向下滚动时，其他组件会一直位于其顶部。我想出的解决方案是获取工具栏的高度，并在边距/填充底部给出“其他组件”的值。因此，它永远不会超越它。

get-height-directive.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);
  }

}

我将该指令应用于此：

where-to-apply-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”来设置同级组件元素的下距样式，但找不到任何解决方案。

感谢您的帮助。

Answer 1

简单的@Output和其他人可以订阅更改。
创建一个服务，例如AppHeightService。在其中创建一个Subject组件变量，该变量将向订阅它的每个人发送计算出的高度。要通过指令通知服务，只需在服务中创建一个函数，如：emitHeight（高度：字符串）。在此功能中，您可以使用此值调用下一个主题。

Answer 2

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

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

摘要： 使用export时，您可以获得访问组件指令的可能性。要获得这种访问权限，您需要将exportAs添加到@Directive Decorator并为其命名。

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

下面是您的代码示例：

@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);
  }

}

注意：

我将样式更改为this.styles，否则该变量将在ngOnInit之后删除，因为let是一个块作用域变量。
在第三行上查看“ exportAs”。

用法：

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

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

请在此处注意heightDirective必须表示exportAs名称的＃varWithDirective =“ heightDirective”。然后，我可以访问变量#varWithDirective中指令的所有值。

希望这对您有所帮助。

重要：可以使用其他方法来明确解决您所要的问题。用JavaScript解决CSS问题是不好的做法。但是为此，我需要更多信息。

考虑使用：z-index /位置固定，也许使用css-grid。

Answer 3

您也可以使用CSS执行此操作。假设您的页眉为100px，页脚为50px。

然后您可以使用

在CSS中设置div的高度

height: calc(100vh - 150px);

这将计算100个视口高度单位，并减去页眉和页脚的150px。

注意：

vh =相对于视口高度的1％

视口=浏览器窗口大小。

Answer 4

get-height-directive.ts

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

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

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

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

}

工具栏HTML：

<div appGetHeight>Test</div>

您可以使用appGetHeight指令来计算工具栏的样式。

您还可以创建另一个指令'ScrollerDirective'，该指令需要附加到组件Template div标签中，该标签可在UI中启用滚动条。

ScrollerDirective：

import {GetHeightDirective} from './get-height.directive';
@ViewChild(GetHeightDirective) getHeightDir;

@HostListener('window:scroll', [$event]) scrolling(event){
    console.log('scrolling');
    console.log(this.getHeightDir);
}

使用ViewChild，可以访问getHeight指令及其公共属性。您可以使用HostListener监听滚动事件。

从指令中获取价值以备将来使用

4 个答案: