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-dialog类的div。我怎么能达到同样的目的？

Answer 1

您需要使用ngClass来实现。您可以为其传递条件：

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

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

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

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

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

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

2 个答案: