Angular 8设置ngSstyle并读取offsetwidth提供旧值

Angular 8是一个流行的前端开发框架，它使用TypeScript编写，并由Google进行维护和支持。在Angular 8中设置ngStyle属性并读取offsetWidth可以实现动态样式的设置和获取元素宽度的功能。下面是对这个问题的完善且全面的答案：

Angular 8中的ngStyle是一个内置指令，用于在HTML元素上动态设置样式。它接受一个对象作为参数，该对象的键是CSS属性名，值是要设置的样式值。使用ngStyle指令可以根据特定的条件或逻辑动态地修改元素的样式。

要设置ngStyle并读取offsetWidth，可以按照以下步骤进行：

1. 在组件的HTML模板中，使用ngStyle指令并绑定一个对象到该指令上，以设置元素的样式。例如：

<div [ngStyle]="{ 'color': 'red', 'font-size': '20px' }">Hello World!</div>

上述示例将会将div元素的文字颜色设置为红色，并将字体大小设置为20像素。

1. 要读取元素的offsetWidth，可以使用Angular的模板引用变量。在HTML模板中，给元素添加一个引用变量，并在组件中使用@ViewChild装饰器来获取该变量的引用。例如：

<div #myElement>Hello World!</div>

在组件的代码中，使用@ViewChild装饰器获取该变量的引用，并通过使用.nativeElement属性来读取offsetWidth。例如：

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

@Component({
  selector: 'my-component',
  template: `<div #myElement>Hello World!</div>`
})
export class MyComponent {
  @ViewChild('myElement', {static: true}) myElement: ElementRef;

  ngAfterViewInit() {
    console.log(this.myElement.nativeElement.offsetWidth);
  }
}

上述示例中，ngAfterViewInit生命周期钩子函数用于在视图初始化后获取元素的offsetWidth，并将其打印到控制台。

总结一下，Angular 8中的ngStyle指令可以动态地设置HTML元素的样式。要读取元素的offsetWidth，可以使用模板引用变量和@ViewChild装饰器来获取元素的引用，并通过.nativeElement属性来读取offsetWidth。

对于Angular 8的更多信息和详细介绍，你可以访问腾讯云的Angular产品文档页面：Angular 产品文档