如何从组件动态添加样式到组件

-1

我想在组件上添加style="overflow:hidden"body标签动态地从组件点击按钮。在此<a>isWriteEmail的点击将是真实的，在那个时候应该添加overflow:hidden身体如何从组件动态添加样式到组件

<a href="javascript:void(0)" 
    class="mail-ac-ico" 
    (click)="appComponent.isWriteEmail = true;" 
    data-toggle="tooltip" 
    tooltip="Compose" 
    title="Compose"> 
    <img src="assets/images/icons/icon-open-email.png" 
          alt="email icon"> 
</a>

试过这种 <body *ngIf="isWriteEmail" style="overflow: hidden;">没有工作

来源

2017-06-19 Nikhil Radadiya

[在Angular2上添加类到主体]可能的副本（https://stackoverflow.com/questions/39971762/add-class-to-body-on-angular2） – 2017-06-20 05:48:43

你必须创建一个类：

.overflowHidden { 
    overflow: hidden 
}

然后，在模板中：

<a href="javascript:void(0)" 
    class="mail-ac-ico" 
    (click)="appComponent.isWriteEmail = true;" 
    [class.overflowHidden]="appComponent.isWriteEmail" 
    data-toggle="tooltip" 
    tooltip="Compose" 
    title="Compose"> 
    <img src="assets/images/icons/icon-open-email.png" alt="email icon"> 
</a>

来源

2017-06-19 12:56:56 Faly

在这里添加类将不起作用，需要添加溢出到'body' –

使用打字稿的解决方案看起来太复杂了，所以试着用javascript/Jquery。

email.component.html

<a href="javascript:void(0)" 
     class="mail-ac-ico" 
     (click)="appComponent.isWriteEmail = true;" 
     data-toggle="tooltip" 
     tooltip="Compose" 
     title="Compose"> 
     <img src="assets/images/icons/icon-open-email.png" 
      alt="email icon"> 
</a>

添加以下代码ngOnInit()

email.component.ts

$('.mail-ac-ico').click(function() { 
    document.body.classList.add('backdrop'); 
});

它的工作。

来源

2017-06-20 05:23:25

'$'做什么？ – 2017-06-20 05:49:33

我正在使用jquery/javascript –

@torazaburo你能提出更好的方法吗？ –

如何从组件动态添加样式到组件

回答

相关问题