コンポーネントからボディにスタイルを動的に追加する方法

-1

bodyタグにstyle="overflow:hidden"タグを追加する場合は、ボタンをクリックするとコンポーネントが動的に追加されます。この<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） –

動作しませんでした試みた：

を

.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 'にオーバーフローを追加する –

typescriptのソリューションが複雑すぎて、javascript/Jqueryで試してみました。それが働いngOnInit()

email.component.ts

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

にコードの下に追加

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>

。

出典

2017-06-20 05:23:25

' $ 'は何をしていますか？ –

jquery/javascriptを使用しています –

@torazaburoもっと良い方法を提案できますか？ –

コンポーネントからボディにスタイルを動的に追加する方法

答えて

関連する問題