文章/答案/技术大牛

发布

社区首页 >问答首页 >角6渲染2/3-如何添加类元素？

问角6渲染2/3-如何添加类元素？
EN

Stack Overflow用户

提问于 2018-10-30 09:22:51

回答 2查看 2K关注 0票数 0

//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“应用于类模式对话框中的div。我怎样才能达到同样的目的？

angular

angular-renderer2

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-10-30 10:13:01

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

Stack Overflow用户

发布于 2018-10-30 09:46:03

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

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

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

ngAfterViewInit和@Output()装饰师将完成这一任务。

只需将一个值(例如，布尔类型的isLoaded)传递给父类型，那么父父将使用ngClass：[ngClass]="{'modal-lg': isChildLoaded}“。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/53060997

复制

相似问题

问角6渲染2/3-如何添加类元素？
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问角6渲染2/3-如何添加类元素？EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问角6渲染2/3-如何添加类元素？
EN