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 ElementRef。你可以在这里阅读更多相关内容。请谨慎使用！下面是一个如何在您的案例中使用它的示例：

在你的 app.component.html

<div #myelement>This is Pink</div>

在你的 app.component.ts

import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']})export class AppComponent implements AfterViewInit {
  @ViewChild('myelement') el: ElementRef;
  ngAfterViewInit() {
    this.el.nativeElement.classList.add("myclass");
  }}

在你的 app.component.css

.myclass {
    color: pink;
    font-weight: bold;}

我希望有所帮助！