Javascript Angular 2 Fix动态粒子JS无法读取属性'；getElementsByClassName'；空的

我正在使用angular 2 v4开发一个web应用程序，我想使用一个参数动态地包含不同的Particles.js，我想加载一个特定的Particles格式

问题是这个参数来自数据库，我通过可观察对象来管理它，因此不可能从ngOnInit函数或构造函数加载它

一切正常并正确加载文档，问题是当我离开该路线时，出现错误：

Cannot read property 'getElementsByClassName' of null

这里是我的一些配置

angular cli.json

"scripts": [
        ...
        "../node_modules/particles.js/particles.js",
        ...
      ],

login.ts

declare var particlesJS: any;
@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {
// Color variables----------------------------------------------------
    default = false;
    amber = false;
    green = false;
    red = false;
    blue = false;
    gray = false;
    white = false;
    purple = false;
    orange = false;
    lightBlue = false;
  // Color variables----------------------------------------------------

  clientConfig: any;
  constructor(public clientConfigService: ClientConfigService) {
        this.clientConfigService.readData().subscribe(data => {
          this.clientConfig = data;
          this.changeTheme(this.clientConfig);
        } );
      }
  ngOnInit() {}

  changeTheme(config: Client) {
    this.default = false;
    this.amber = false;
    this.green = false;
    this.red = false;
    this.blue = false;
    this.gray = false;
    this.white = false;
    this.purple = false;
    this.orange = false;
    this.lightBlue = false;
    switch (config.color) {
      case 'default': this.default = true; particlesJS.load('particles-js', 'assets/data/default-particles.json'); break;
      case 'amber': this.amber = true; particlesJS.load('particles-js', 'assets/data/amber-particles.json'); break;
      case 'green': this.green = true; particlesJS.load('particles-js', 'assets/data/green-particles.json'); break;
      case 'red': this.red = true; particlesJS.load('particles-js', 'assets/data/red-particles.json'); break;
      case 'blue': this.blue = true; particlesJS.load('particles-js', 'assets/data/blue-particles.json'); break;
      case 'gray': this.gray = true; particlesJS.load('particles-js', 'assets/data/gray-particles.json'); break;
      case 'white': this.white = true; particlesJS.load('particles-js', 'assets/data/white-particles.json'); break;
      case 'purple': this.purple = true; particlesJS.load('particles-js', 'assets/data/purple-particles.json'); break;
      case 'orange': this.orange = true; particlesJS.load('particles-js', 'assets/data/orange-particles.json'); break;
      case 'lightblue': this.lightBlue = true; particlesJS.load('particles-js', 'assets/data/light-blue-particles.json'); break;
      default: this.default = true; particlesJS.load('particles-js', 'assets/data/default-particles.json'); break;
    }
  }
}

login.html

<div id="particles-js"></div>

<div class="whitemask">
    <div id="particles-js" fxLayout="column" fxLayoutAlign="center center" class=" gradient-animated">
      <div class="session-wrapper" style="position: absolute;">

        <div class="mat-card-login">
          <div class="login-form">
            <form [formGroup]="form" (ngSubmit)="onSubmit()" autocomplete="off">
              <div fxLayout="column" fxLayoutAlign="space-around">
                <div class="pb-1">
                  <mat-form-field color="accent" class="login-input" style="width: 100%">
                    <input name="i-sl-li-lg-001" matInput placeholder="Cuenta"  [formControl]="form.controls['account']">
                    <mat-error *ngIf="form.controls['account'].hasError('required') && form.controls['account'].touched" class="mat-text-warn">Debe ingresar una cuenta válida.</mat-error>
                  </mat-form-field>
                </div>
                <div class="pb-1">
                  <mat-form-field color="accent" class="login-input" style="width: 100%">
                    <input name="i-sl-li-lg-003" matInput color="accent" [type]="passvisible" placeholder="Contraseña" [formControl]="form.controls['password']">
                    <mat-icon matSuffix (click)="visibePass()" style="cursor: pointer" [ngStyle]="{ 'color': passvisible === 'password' ? 'rgba(0,0,0,0.44)' : 'black' }">visibility</mat-icon>
                    <mat-error *ngIf="form.controls['password'].hasError('required') && form.controls['password'].touched" class="mat-text-warn">Debe ingresar una contraseña.</mat-error>
                  </mat-form-field>
                </div>
                <div *ngIf="showMessage" fxLayout="row" fxLayoutAlign="center center" class="errortext" style="margin-bottom: 10px; margin-top: -15px">{{ error }}</div>
                <button id="b152" mat-raised-button class="login-button" type="submit" [disabled]="!form.valid">Iniciar sesión</button>

                <div style="padding-top: 10px" fxLayout="row" fxLayoutAlign="center center">
                    <a class="forgot" [routerLink]="['/session/forgot']">¿Olvidaste tu contraseña?</a>
                </div>
              </div>
            </form>
          </div>
        </div>

      </div>
    </div>
  </div>

Login.html

<div id="particles-js"></div>

<div class="whitemask">
    <div id="particles-js" fxLayout="column" fxLayoutAlign="center center" class=" gradient-animated">
      <div class="session-wrapper" style="position: absolute;">

        <div class="mat-card-login">
          <div class="login-form">
            <form [formGroup]="form" (ngSubmit)="onSubmit()" autocomplete="off">
              <div fxLayout="column" fxLayoutAlign="space-around">
                <div class="pb-1">
                  <mat-form-field color="accent" class="login-input" style="width: 100%">
                    <input name="i-sl-li-lg-001" matInput placeholder="Cuenta"  [formControl]="form.controls['account']">
                    <mat-error *ngIf="form.controls['account'].hasError('required') && form.controls['account'].touched" class="mat-text-warn">Debe ingresar una cuenta válida.</mat-error>
                  </mat-form-field>
                </div>
                <div class="pb-1">
                  <mat-form-field color="accent" class="login-input" style="width: 100%">
                    <input name="i-sl-li-lg-003" matInput color="accent" [type]="passvisible" placeholder="Contraseña" [formControl]="form.controls['password']">
                    <mat-icon matSuffix (click)="visibePass()" style="cursor: pointer" [ngStyle]="{ 'color': passvisible === 'password' ? 'rgba(0,0,0,0.44)' : 'black' }">visibility</mat-icon>
                    <mat-error *ngIf="form.controls['password'].hasError('required') && form.controls['password'].touched" class="mat-text-warn">Debe ingresar una contraseña.</mat-error>
                  </mat-form-field>
                </div>
                <div *ngIf="showMessage" fxLayout="row" fxLayoutAlign="center center" class="errortext" style="margin-bottom: 10px; margin-top: -15px">{{ error }}</div>
                <button id="b152" mat-raised-button class="login-button" type="submit" [disabled]="!form.valid">Iniciar sesión</button>

                <div style="padding-top: 10px" fxLayout="row" fxLayoutAlign="center center">
                    <a class="forgot" [routerLink]="['/session/forgot']">¿Olvidaste tu contraseña?</a>
                </div>
              </div>
            </form>
          </div>
        </div>

      </div>
    </div>
  </div>

---

请将构造中的代码移到ngAfterViewInit，然后重试

declare var particlesJS: any;
@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit, AfterViewInit {
// Color variables----------------------------------------------------
    default = false;
    amber = false;
    green = false;
    red = false;
    blue = false;
    gray = false;
    white = false;
    purple = false;
    orange = false;
    lightBlue = false;
  // Color variables----------------------------------------------------

  clientConfig: any;
  constructor(public clientConfigService: ClientConfigService) {

  }

  ngOnInit() {}

  ngAfterViewInit() {
       this.clientConfigService.readData().subscribe(data => {
          this.clientConfig = data;
          this.changeTheme(this.clientConfig);
        } );
  }

  changeTheme(config: Client) {
    this.default = false;
    this.amber = false;
    this.green = false;
    this.red = false;
    this.blue = false;
    this.gray = false;
    this.white = false;
    this.purple = false;
    this.orange = false;
    this.lightBlue = false;
    switch (config.color) {
      case 'default': this.default = true; particlesJS.load('particles-js', 'assets/data/default-particles.json'); break;
      case 'amber': this.amber = true; particlesJS.load('particles-js', 'assets/data/amber-particles.json'); break;
      case 'green': this.green = true; particlesJS.load('particles-js', 'assets/data/green-particles.json'); break;
      case 'red': this.red = true; particlesJS.load('particles-js', 'assets/data/red-particles.json'); break;
      case 'blue': this.blue = true; particlesJS.load('particles-js', 'assets/data/blue-particles.json'); break;
      case 'gray': this.gray = true; particlesJS.load('particles-js', 'assets/data/gray-particles.json'); break;
      case 'white': this.white = true; particlesJS.load('particles-js', 'assets/data/white-particles.json'); break;
      case 'purple': this.purple = true; particlesJS.load('particles-js', 'assets/data/purple-particles.json'); break;
      case 'orange': this.orange = true; particlesJS.load('particles-js', 'assets/data/orange-particles.json'); break;
      case 'lightblue': this.lightBlue = true; particlesJS.load('particles-js', 'assets/data/light-blue-particles.json'); break;
      default: this.default = true; particlesJS.load('particles-js', 'assets/data/default-particles.json'); break;
    }
  }
}

---

您收到此错误是因为particles.js尝试访问的html元素尚未生成。请查看以了解更多信息。

谢谢您的回复，但不幸的是，它没有起作用。你们知道有其他方法来修复这个错误吗？我创建了一个Stackblitz应用程序的例子，它已经运行了。请核对：

declare var particlesJS: any;
@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit, AfterViewInit {
// Color variables----------------------------------------------------
    default = false;
    amber = false;
    green = false;
    red = false;
    blue = false;
    gray = false;
    white = false;
    purple = false;
    orange = false;
    lightBlue = false;
  // Color variables----------------------------------------------------

  clientConfig: any;
  constructor(public clientConfigService: ClientConfigService) {

  }

  ngOnInit() {}

  ngAfterViewInit() {
       this.clientConfigService.readData().subscribe(data => {
          this.clientConfig = data;
          this.changeTheme(this.clientConfig);
        } );
  }

  changeTheme(config: Client) {
    this.default = false;
    this.amber = false;
    this.green = false;
    this.red = false;
    this.blue = false;
    this.gray = false;
    this.white = false;
    this.purple = false;
    this.orange = false;
    this.lightBlue = false;
    switch (config.color) {
      case 'default': this.default = true; particlesJS.load('particles-js', 'assets/data/default-particles.json'); break;
      case 'amber': this.amber = true; particlesJS.load('particles-js', 'assets/data/amber-particles.json'); break;
      case 'green': this.green = true; particlesJS.load('particles-js', 'assets/data/green-particles.json'); break;
      case 'red': this.red = true; particlesJS.load('particles-js', 'assets/data/red-particles.json'); break;
      case 'blue': this.blue = true; particlesJS.load('particles-js', 'assets/data/blue-particles.json'); break;
      case 'gray': this.gray = true; particlesJS.load('particles-js', 'assets/data/gray-particles.json'); break;
      case 'white': this.white = true; particlesJS.load('particles-js', 'assets/data/white-particles.json'); break;
      case 'purple': this.purple = true; particlesJS.load('particles-js', 'assets/data/purple-particles.json'); break;
      case 'orange': this.orange = true; particlesJS.load('particles-js', 'assets/data/orange-particles.json'); break;
      case 'lightblue': this.lightBlue = true; particlesJS.load('particles-js', 'assets/data/light-blue-particles.json'); break;
      default: this.default = true; particlesJS.load('particles-js', 'assets/data/default-particles.json'); break;
    }
  }
}