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

Question

我遇到的问题是，当我尝试通过ID访问html元素时，我遇到以下错误。当用户单击按钮以将不同的样式类应用于元素时，我正在尝试访问classList。除非我将viewEncapsulation切换回默认的模拟设置，否则类列表和元素通常都是null。

错误消息：

TypeError: Cannot read property 'classList' of null

问题：我试图让这个特定的组件不继承我通过angular.json文件导入到项目中的第三方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>

Answer 1

我能想到访问HTML元素的最简单方法是使用Angulars&nbsp;ElementRef。你可以在这里阅读更多相关内容。请谨慎使用！下面是一个如何在您的案例中使用它的示例：在你的&nbsp;app.component.html<div&nbsp;#myelement>This&nbsp;is&nbsp;Pink</div>在你的&nbsp;app.component.tsimport&nbsp;{&nbsp;Component,&nbsp;ViewChild,&nbsp;ElementRef,&nbsp;AfterViewInit&nbsp;}&nbsp;from&nbsp;'@angular/core';@Component({ &nbsp;&nbsp;selector:&nbsp;'app-root', &nbsp;&nbsp;templateUrl:&nbsp;'./app.component.html', &nbsp;&nbsp;styleUrls:&nbsp;['./app.component.css']})export&nbsp;class&nbsp;AppComponent&nbsp;implements&nbsp;AfterViewInit&nbsp;{ &nbsp;&nbsp;@ViewChild('myelement')&nbsp;el:&nbsp;ElementRef; &nbsp;&nbsp;ngAfterViewInit()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;this.el.nativeElement.classList.add("myclass"); &nbsp;&nbsp;}}在你的&nbsp;app.component.css.myclass&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;color:&nbsp;pink; &nbsp;&nbsp;&nbsp;&nbsp;font-weight:&nbsp;bold;}我希望有所帮助！