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

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

Answer 1

你需要使用ngClass来实现这一点。您可以将条件传递给它：

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

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

和装饰器会做的伎俩ngAfterViewInit。@Output()

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

Answer 2

使用 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>

组件.ts

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