DOM Манипуляции в Ангуляр 5

Question

Например, у меня есть:

<div class="btn-wrapper-bt1"> <button>AAA</button> </div>

Эта кнопка находится на стороннем элементе, который существует в node_modules/somebt

Я хотел бы сделать несколько простых изменений класса в среде Angular.

Есть ли простой способ изменить его в ngOnInit? Или мне нужно раскошелиться на источник и изменить его внутри источника?

Заранее спасибо.

Answer 1

В html добавьте ссылку #ref на элемент, содержащий ваш сторонний компонент

yourComponent.html

<div #ref >
   <your-3rd-party-component></your-3rd-party-component>
</div>

Затем в вашем компоненте получите дочерние элементы содержащего элемента

yourComponent.ts

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

export class YourParentComponent  {


  @ViewChild('ref') containerEltRef: ElementRef;

  constructor(private renderer: Renderer2)
  {

  }

  ngAfterViewInit()
  {
    // retrieves element by class 
    let elt = this.containerEltRef.nativeElement.querySelector('.btn-wrapper-bt1');
    this.renderer.addClass(elt, 'newClass'); //Adds new class to element

  }
}

Вот демо stacklblitz

Примечание : Если вы просто хотите изменить внешний вид стороннего компонента, вы можете просто переопределить класс в своем собственном компоненте

yourComponent.scss

:host ::ng-deep .btn-wrapper-bt1
{
  color: red;
}

Answer 2

Добавить ссылку:

<div #myRef class="btn-wrapper-bt1">
   <button>AAA</button>
</div>

А в твоем TS:

@ViewChild('myRef') myElement: ElementRef;

myFunc(){
    // do whatever you want with it AFTER you third party module finished its job (that's your call)
    //this.myElement.nativeElement.querySelector()
    //this.myElement.nativeElement.classList.remove('toto')
}