Angular 9中获取div class名字的高度

在Angular 9中，如果你想要获取某个`<div>`元素的CSS高度，你可以使用JavaScript或者TypeScript来操作DOM。假设你的`<div>`有一个id，比如`myDiv`，并且它的样式信息中包含`height`属性，你可以这样做：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <div #myDiv class="someClass" style="height: 100px;">内容</div>
  `,
})
export class AppComponent implements OnInit {
  @ViewChild('myDiv') myDivRef: ElementRef;

  ngOnInit() {
    const height = this.myDivRef.nativeElement.offsetHeight; // 使用offsetHeight获取绝对高度
    console.log(`Element height: ${height}px`);
  }
}

在这个例子中，我们使用了`@ViewChild`装饰器从模板中获取到`myDiv`元素的引用，并通过`nativeElement`属性访问原生DOM节点。然后通过`offsetHeight`属性获取到元素的高度。

相关问题

Angular 9中获取div 子级的高度

在Angular 9中，获取`<div>`子级高度通常有两种方法，取决于你是在组件内还是外部需要获取：

1. **组件内部**:
- 使用`ViewChild`装饰器：假设你要获取的子元素是`childElement`，在你的组件的类里添加如下属性：

     @ViewChild('childElement') childElement: ElementRef;

- 然后你可以在需要的时候通过`nativeElement`属性获取元素高度：

     this.childElement.nativeElement.offsetHeight;

2. **组件外部（例如服务、管道等）**:
- 如果在非组件上下文中，你可以创建一个服务并注入`Renderer2`或`ElementRef`服务：

     import { ComponentRef, Renderer2 } from '@angular/core';

     export class HeightService {
       constructor(private renderer: Renderer2) {}

       getHeight(elementId: string): number {
         const element = document.getElementById(elementId);
         return element ? element.offsetHeight : null;
       }
     }

- 调用这个服务的方法，传入子元素的ID即可。

记住要在Angular运行周期（如`ngAfterViewInit`）中获取高度，因为DOM可能在初始化后才会完全加载完成。

在angular9中动态设置style 容器高度

在Angular 9中，动态地设置元素的样式，特别是高度，通常通过组件内的 TypeScript 代码来完成。你可以使用 `@ViewChild` 和 `ElementRef` 来获取并操作DOM元素，然后设置其 `style.height` 属性。

下面是一个基本示例：

import { Component, ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: 'app-your-component',
  template: `
    <div #yourContainer class="container" style="width: 100%;"></div>
  `
})
export class YourComponent {
  @ViewChild('yourContainer', { static: false }) containerElement: ElementRef;

  someFunction() {
    // 获取容器的高度
    let currentHeight = this.containerElement.nativeElement.offsetHeight;
    
    // 然后可以根据需要动态更改高度，例如增加10px
    let newHeight = currentHeight + 10;
    this.containerElement.nativeElement.style.height = `${newHeight}px`;
  }
}

在这个例子中，当你调用 `someFunction()` 函数时，会根据当前容器的高度动态改变其高度。