javascript - Angular2のナビゲーションバーからモーダルを開く正しい方法は?

Question

一部の要素に ng2-bootstrap を使用して、Angular2 の個人サイトで作業しています。

電子メールの連絡先フォームのモーダルを起動するボタンまたはテキスト リンクが必要な固定ナビゲーション バーがあります。私が抱えている問題は、モーダルを開くとグレー表示されることです。私の理解では、それはナビゲーションバーに固定されているためです。私が理解しているように、これに対処する1つの方法は、JQueryを使用してモーダルをボディタグに追加することですが、DOMを直接操作することはAngular2では悪い習慣であることを読みました(そして、とにかく、TypeScriptでそれを行う正しい方法は.

私は長い間プログラマーですが、Web 開発の世界でそれほど高度なことは何もしていません。

私が持っている TypeScript は次のようになります。

import {Component} from '@angular/core';
import {CORE_DIRECTIVES} from '@angular/common';
import {MODAL_DIRECTVES, BS_VIEW_PROVIDERS} from 'ng2-bootstrap/ng2-bootstrap';


@Component({
    selector: 'contact-modal',
    directives: [MODAL_DIRECTVES, CORE_DIRECTIVES],
    viewProviders:[BS_VIEW_PROVIDERS],
    template: `    

<button class="btn btn-primary button-text" (click)="lgModal.show()">Large modal</button>


<div bsModal #lgModal="bs-modal" class="modal fade modal-backdrop" data-backdrop="false" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" (click)="lgModal.hide()" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title">this is going to be an email contact form</h4>
        <p> email form goes here</p>
      </div>
      <div class="modal-body">
        ...
      </div>
    </div>
  </div>
</div>    
    `
})

export class ContactModalComponent{
//something goes here?    
}

リンクが必要なナビゲーションバーに contact-modal への参照を配置するだけで、ナビゲーションバーに含めています。助けてくれてありがとう。