Angular 12绑定div的data-theme属性报NG8002错误如何解决？

Angular默认的[prop]绑定语法是用于绑定DOM属性的，data-*属于自定义HTML属性，不在div的原生DOM属性列表里，Angular找不到对应的可绑定属性，就会抛出NG8002报错。

最简单的方案就是用Angular的attribute绑定语法，只要在属性名前加attr.前缀，明确告知Angular你要绑定的是HTML属性而非DOM属性即可，模板修改后如下：

<div class="app-container" [attr.data-theme]="theme">
  <router-outlet></router-outlet>
</div>

改完不需要调整其他TypeScript代码，直接就能正常运行，完全满足你动态切换主题的需求。

如果你有更复杂的属性操作场景，也可以用Renderer2来动态设置属性，不过针对当前需求没必要，作为扩展参考即可：

import { Component, Renderer2, ElementRef } from '@angular/core';
import { ThemeService } from './common/_services';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  constructor(
    private themeService: ThemeService,
    private renderer: Renderer2,
    private el: ElementRef
  ) {
    this.themeService.isDark.subscribe(isDark => {
      const themeVal = isDark ? 'dark' : 'light';
      this.renderer.setAttribute(
        this.el.nativeElement.querySelector('.app-container'),
        'data-theme',
        themeVal
      );
    });
  }
}

内容的提问来源于stack exchange，提问作者Nicke Manarin