Angular 6 Renderer2/3 - 如何向元素添加类？答案

【问题标题】：Angular 6 Renderer2/3 - how to add class to element?Angular 6 Renderer2/3 - 如何向元素添加类？
【发布时间】：2019-04-03 07:11:33
【问题描述】：

//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>

当加载名为“UPIComponent”的子组件时，我想将类“modal-lg”应用到具有模态对话框类的 div。我怎样才能达到同样的效果？

【问题讨论】：

你的意思是当某些路由激活时你想添加model-lg类？
看看这个link
@chellapan - 是的，但在路线激活之前。我尝试使用 CanActivate 但它不起作用。

标签： angular angular-renderer2

【解决方案1】：

您需要使用ngClass 来实现此目的。你可以给它传递一个条件：

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

关于获取此条件（在您的情况下是加载子组件时），您必须将此信息从子组件传递给父组件（告诉父组件它已加载）。

ngAfterViewInit 和 @Output() 装饰器可以解决问题。

只需将一个值（例如isLoaded 布尔类型）传递给父级，然后父级将使用ngClass:[ngClass]="{'modal-lg': isChildLoaded}"。

【讨论】：

【解决方案2】：

使用路由器模板变量并激活事件以传递模板引用以获取组件名称，然后使用 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;
  }

【讨论】：