Angular 6 Renderer2/3 - как добавить класс к элементу?

Question

//Parent Component html:
<div class="modal" id="modal" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
               <router-outlet>
               </router-outlet>
             </div>
       </div>
   </div>
</div>

Я хочу применить класс "modal-lg" к div с классом modal-dialog, когда загружен мой названный дочерний компонент "UPIComponent". Как я могу достичь того же?

Answer 1

Используйте переменную Router Template и активируйте событие для передачи шаблона ref для получения имени компонента, затем используйте ngClass для добавления нужного класса

<div class="modal" id="modal" data-backdrop="static" data-keyboard="false">
    <div [ngClass]="modelClass==='UPIComponent' ? 'model-lg': 'model-dialog'" >
        <div class="modal-content">
            <div class="modal-body">
                <router-outlet #o="outlet"
                 (activate)='onActivate(o)'>
                 </router-outlet>
             </div>
       </div>
   </div>
</div>

component.ts

 modelClass = '';
  onActivate(o) {
    this.modelClass = o.activatedRoute.component.name;
  }

Answer 2

Вам нужно использовать ngClass для достижения этой цели. Вы можете передать ему условие:

<some-element [ngClass]="{'modal-lg': yourCondition}">...</some-element>,

Что касается получения этого условия (в вашем случае это когда ваш дочерний компонент загружен), вам придется передать эту информацию от дочернего компонента к родителю (сообщая родителю, что он загружен).

ngAfterViewInit и @Output() Декоратор сделает свое дело.

Просто передайте значение (isLoaded например, логический тип) к родителю, тогда родитель будет использовать ngClass: [ngClass]="{'modal-lg': isChildLoaded}".