angular - Hämta värde från direktiv för framtida användning

Jag försöker få en verktygsfält fast längst ner i fönstret, men en annan komponent hamnar alltid ovanpå den när jag skrollar ner. Lösningen jag kom på var att ta höjden på verktygsfältet och ge den "andra komponenten" DET värdet i margin/padding nedtill. Så den kommer aldrig att hamna ovanpå det.

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

}

Jag tillämpade den direktiven på detta:

var-man-ska-ansöka-direktiv.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>

Med detta får jag höjden på verktygsfältet i en console.log som säger något som 66.8px. Jag vill använda det där '100px' nu för att styla margin-bottom på ett element i en syskonkomponent, men jag kunde inte hitta någon lösning.

Tack för hjälpen.

Svar #1

För att få tillgång till instansen av en direktiv, överväg att använda exportAs-variabeln. Du kan läsa mer här:

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

Sammanfattning: Med export får du möjligheten att få åtkomst till en komponents direktiv. För att få sådan åtkomst behöver du lägga till exportAs i @Directive-dekoratorn och ge det ett namn.

För att spara direktivet till en variabel i förälderns vy kan du använda följande syntax:

Här är ett exempel med din kod:

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

}

Notera:

1. Jag ändrade styles till this.styles annars kommer variabeln att tas bort efter ngOnInit eftersom let är en block-skopad variabel.

2. Ta en titt på "exportAs" på den tredje raden.

Användning :

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

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

Observera här #varWithDirective="heightDirective" höjdDirektiven måste representera exportAs-namnet. Då har jag tillgång till alla värden från direktiven inom variabeln #varWithDirective.

Jag hoppas att detta hjälper dig.

Viktigt: Det du frågar efter kan definitivt lösas med en annan metod. Det är dålig praxis att lösa CSS-problem med JavaScript. Men för det skulle jag behöva mer information.

Överväg att använda: z-index/position fixed och kanske css-grid.

Svar #2

1. Enkel @Output och andra kan prenumerera på förändringen.

2. Skapa en tjänst, som AppHeightService. Skapa en Subject-komponentvariabel i den som kommer att sända den beräknade höjden till alla som prenumererar på den. För att meddela tjänsten från direktivet, skapa helt enkelt en funktion i tjänsten som: emitHeight(height: string). I denna funktion kan du anropa next på subject med detta värde.