Angular从5.1升级到8后NgStyle实例化报错的解决方案咨询

这是Angular跨大版本升级时常见的API变更问题，别担心，我们来一步步解决它：

为什么会报错？ #

Angular 5.1的NgStyle构造函数需要3个参数（KeyValueDiffers、ElementRef、Renderer2），但Angular 8重构后，NgStyle的内部实现做了简化——它不再需要手动传入元素引用和渲染器，这些依赖现在由Angular的依赖注入系统自动处理，构造函数仅保留了KeyValueDiffers这一个必填参数。

解决方法 #

1. 不要手动实例化NgStyle，改用依赖注入 #

如果你需要在自定义指令中使用NgStyle的功能，直接通过构造函数注入实例即可，Angular会自动帮你处理所有依赖：

import { NgStyle, KeyValueDiffers } from "@angular/common";
import { Directive, OnInit, ElementRef, Renderer2 } from '@angular/core';

@Directive({ selector: '[chartContainer]' })
export class ChartContainerDirective implements OnInit {
  constructor(
    private readonly ngStyle: NgStyle,
    private readonly _differs: KeyValueDiffers,
    private readonly divRef: ElementRef,
    private readonly renderer: Renderer2
  ) {}

  ngOnInit(): void {
    // 示例：使用NgStyle设置样式
    this.ngStyle.setStyle('width', '100%');
  }
}

2. 继承NgStyle扩展功能（如果需要自定义逻辑） #

如果你的指令是想要扩展NgStyle的原生功能，可以直接继承它，只需在父类构造函数中传入KeyValueDiffers：

import { NgStyle, KeyValueDiffers } from "@angular/common";
import { Directive, ElementRef, Renderer2 } from '@angular/core';

@Directive({ selector: '[chartContainer]' })
export class ChartContainerDirective extends NgStyle implements OnInit {
  constructor(
    _differs: KeyValueDiffers,
    private readonly divRef: ElementRef,
    private readonly renderer: Renderer2
  ) {
    // 调用父类构造函数，仅传入必填的KeyValueDiffers
    super(_differs);
  }

  ngOnInit(): void {
    // 添加你的自定义逻辑
    this.setStyle('height', '400px');
  }
}

3. 直接在模板中使用原生NgStyle（最简便） #

如果你的需求只是给容器元素设置动态样式，完全不需要手动实例化NgStyle，直接在模板中应用原生的[ngStyle]指令即可，让Angular帮你管理样式：

<div chartContainer [ngStyle]="{ width: '100%', height: '400px' }"></div>

这样你的指令可以专注于处理其他业务逻辑，样式相关的工作交给原生NgStyle来完成。

额外提示 #

升级Angular大版本时，一定要参考官方的版本升级指南，每个版本之间的API变更、废弃特性都有详细说明，可以避免很多类似的兼容性问题。

内容的提问来源于stack exchange，提问作者Harshavardhan N