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

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

0 голосов
/ 30 октября 2018 
//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". Как я могу достичь того же?

Ответы [ 2 ]

0 голосов
/ 30 октября 2018

Используйте переменную 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;
  }
0 голосов
/ 30 октября 2018

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

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

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

ngAfterViewInit и декоратор @Output() справятся с задачей.

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

...