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

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>

Answer 1

我能想到的访问 HTML 元素的最简单方法是使用 Angulars ElementRef。您可以阅读更多相关内容 here 。 请谨慎使用!下面是有关如何在您的情况下使用它的示例:

在您的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;
}

编辑:

对于纯粹的样式，正如 @SnorreDan 已经提到的，最好使用 Angulars [ngClass]指示。您可以通过以下示例了解如何做到这一点:

在您的app.component.html

<div [ngClass]="myColorClass">This may change color!</div>

<button (click)="makePink()">Pink</button>
<button (click)="makeGreen()">Green</button>

在您的app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  myColorClass: string

  makePink() {
    this.myColorClass = 'pink';
  }

  makeGreen() {
    this.myColorClass = 'green';
  }
}

在你的app.component.css

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

.green {
    color: green;
    font-weight: bold;
}

希望对您有所帮助!