Angular 6 Renderer2/3 - 如何添加 class 到元素？

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" 命名子组件加载时使用 class 模态对话框将 class "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 添加所需的 class

<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;
  }

Angular 6 Renderer2/3 - 如何添加 class 到元素？

Angular 6 Renderer2/3 - how to add class to element?

angular

angular-renderer2