Добавить и удалить класс элементов на ViewChild в Angular

У меня в приложении есть вкладки, активная вкладка должна соответствовать уровню пользователя. Я создал viewChild, чтобы добавить его активный класс, но мне это не удалось, и появляется следующая ошибка:

ERROR TypeError: Cannot read property 'querySelector' of undefined
    at TrainingComponent.push../src/app/views/training/training.component.ts.TrainingComponent.ngAfterViewInit

Мой компонент:

  @ViewChild('tabExplorator') tabExplorator: ElementRef;
  @ViewChild('tabEspecialist') tabEspecialist: ElementRef;

  constructor(public timeguard:TimeguardService, public router: Router,  public progressbar:ProgressBarService, public geo: GeolocationService, public dl: DatalayerService<GameDimensionSet>, public database: DatabaseService < Fase > , public auth: AuthService) {}

  ngAfterViewInit () {
    //assigning an element to a variable
    let tabExplorator = this.tabExplorator.nativeElement.querySelector('tabExplorator')
    let tabEspecialist = this.tabEspecialist.nativeElement.querySelector('tabEspecialist')

    if(this.auth.User.nivel == 'EXPLORADOR' && tabExplorator.classList.contains('active')){
      tabExplorator.classList.remove('active')
      tabEspecialist.classList.add('active')
    }

  }

Мой HTML:

 <ul class="tabs ranking-letra-tabs tabs-icon">
      <li class="tab col s3 cor-explorador alinha-texto">
        <a href="#ranking-nivel1" #tabExplorator>
          <div>
            <i class="material-icons cor-estrelas tabs-icon">star</i>
          </div>
          <div class="">
            {{NIVEL1}}
          </div>
        </a>
      </li>

      <li class="tab col s3 cor-especialista alinha-texto">
        <a href="#ranking-nivel2" #tabEspecialist>
          <div>
            <i class="material-icons cor-estrelas estrela-tabs-1">star</i>
            <i class="material-icons cor-estrelas estrela-tabs-2">star</i>
          </div>
          <div>
            {{NIVEL2}}
          </div>
        </a>
      </li>
    </ul>

Я использую материализацию, согласно документации:

«Показать содержимое вкладки, соответствующее вкладке с идентификатором»

instance.select('tab_id');

Это могло помочь?


typescript angular tabs materialize viewchild
person Guilherme Lucas    schedule 03.04.2020    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Вы можете использовать Renderer2 вместе с ElementRef для переключения классов элементов. Он использует addClass() и _ 4_ зависит от того, содержит ли элемент active класс. Логическое значение, обозначающее текущее состояние, получается с помощью element.classList.contains('active') функция. Попробуйте следующее

import { Component, ViewChild, ElementRef, Renderer2 } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  @ViewChild('tabExplorator') tabExplorator: ElementRef;

  constructor(private renderer: Renderer2) { }

  toggleBackground() {
    const active = this.tabExplorator.nativeElement.classList.contains('active');

    this.renderer[active ? 'removeClass' : 'addClass'](this.tabExplorator.nativeElement, 'active');
  }
}

Рабочий пример: Stackblitz

person Michael D    schedule 04.04.2020

arrow_upward
0
arrow_downward

Я бы порекомендовал вам немного прочитать о ngClass для добавления или удаления класса в элементе с выражениями. В вашем коде я бы написал такой код:

 <ul class="tabs ranking-letra-tabs tabs-icon">
  <li class="tab col s3 cor-explorador alinha-texto">
    <a href="#ranking-nivel1" [class.active]="isUserExplorer">
      <div>
        <i class="material-icons cor-estrelas tabs-icon">star</i>
      </div>
      <div class="">
        {{NIVEL1}}
      </div>
    </a>
  </li>

  <li class="tab col s3 cor-especialista alinha-texto">
    <a href="#ranking-nivel2" [class.active]="!isUserExplorer">
      <div>
        <i class="material-icons cor-estrelas estrela-tabs-1">star</i>
        <i class="material-icons cor-estrelas estrela-tabs-2">star</i>
      </div>
      <div>
        {{NIVEL2}}
      </div>
    </a>
  </li>
</ul>

Адаптация логики, которая вам нужна в isUserExplorer и в вашем машинописном коде:

get isUserExplorer(): boolean { return this.auth.User.nivel === 'EXPLORADOR'; }

constructor(public timeguard:TimeguardService, public router: Router,  public progressbar:ProgressBarService, public geo: GeolocationService, public dl: DatalayerService<GameDimensionSet>, public database: DatabaseService < Fase > , public auth: AuthService) {}

Я рекомендую вам не использовать @ViewChild для предотвращения нарушения инкапсуляции элементов. В руководстве по стилю вы можете просмотреть [class.syntax] и другие советы, чтобы получить красивый код xd

Я надеюсь, что это помогает

person Luis Felipe Diaz Valbuena    schedule 04.04.2020