Angular - 如何在使用 ViewEncapsulation.Native 时访问

Question

我遇到的问题是，在尝试通过 ID 访问 html 元素时出现以下错误。当用户单击按钮以将不同的样式类应用于元素时，我试图访问 classList。类列表和元素通常始终为空，除非我将 viewEncapsulation 切换回默认的模拟设置。错误信息：TypeError: Cannot read property 'classList' of null问题：我试图让这个特定组件不继承我通过 angular.json 文件导入到项目中的第 3 方 SCSS 文件。当我使用默认的 ViewEncapsulation.Emulated 时，该组件正在继承与某些组件样式相冲突的全局 SCSS 样式。文件结构正常，我把SCSS和HTML放在对应的文件中，然后导入到组件中。我觉得这应该是大型项目的一个共同主题。如果有不同的方式来切换事件元素的样式，请告诉我。组件.ts：import { Component, ViewEncapsulation, OnInit } from '@angular/core';@Component({  encapsulation: ViewEncapsulation.Native,  selector: 'app-root',  templateUrl: './app.component.html',  styleUrls: ['./app.component.scss']})export class AppComponent implements OnInit {  title = 'scssTesting';  constructor() { }  step: string = 'step1';  step1: any;  step2: any;  step3: any;  ngOnInit() {  }  next() {    this.step1 = document.getElementById('step1');    this.step2 = document.getElementById('step2');    this.step3 = document.getElementById('step3');    if (this.step === 'step1') {      this.step = 'step2';      this.step1.classList.remove("is-active");      this.step1.classList.add("is-complete");      this.step2.classList.add("is-active");    } else if (this.step === 'step2') {        ....  }}组件 .scss.progress {  position: relative;  display: flex;  .........}组件 .html<div class="container">    <div class="progress">        <div class="progress-track"></div>        <div id="step1" class="progress-step">            Step One        </div>        <div id="step2" class="progress-step">            Step Two        </div>        <div id="step3" class="progress-step">            Step Three        </div>    </div>    <button (click)="next()">Next Step</button></div>