ブートストラップなしでjQueryなしでAngular2 Modalコンポーネントを作成するには？

Question

このトピックに関するすべての検索では、ブートストラップに依存する既存のコンポーネントのインポートが行われます。

私はブートストラップを使いたくありません。私は自分自身の単純なHTMLマークアップが必要で、クラス名が少なくて済み、すでに複雑なマークアップを覚えて群衆化したい。

コンポーネント、コンポーネントライフサイクル、サービス、テンプレート、イベント、オブザーバブル、その他のAngular2の概念はかなり快適ですが、「親ページ」が<ルータに終わるネストされたコンポーネントのみを構築できますアウトレット>。

ほとんどのチュートリアルやビデオコースでは対処していない、あまり知られていないAngular2の概念があるかもしれないと思うので、モーダルポップアップを実現できます。私は何とかDOMを "ハック"して、Webページ全体のルートにいくつかのhtmlを挿入しなければならないと思うので、私は絶対にモーダルを配置することができます。 Angular2の内部の仕組みや原則に違反する可能性があるため、jQueryを使用したくありません。可能であれば、私はDOMを操作するためにAngular2で安全な方法を知りたいのですが、私はコンポーネントコードからDOM要素を追跡したくないのです。

アラートの確認とプロンプトが必要なだけではありません。私は、ユーザーがデータベースに何かを保存したり、リストからアイテムを選択できるようにする、モーダルウィンドウ上にフォームコンポーネントを配置できるようにしたいと考えています。

私はたくさんのために求めている知っているが、特に：私のポップアップ・コンポーネントは、最低でも

1. 何HTMLマークアップとCSSを持っている必要がありますか？理想的には、私は半透明のカバーをページ全体に置き、その上に実際のモーダルを置きたい。ユーザーがモーダルウィンドウの外側をクリックできないようにします。
2. 絶対に必要な場合、これを引き出すためにサービスとオブザーバブルを使用する方法はありますか？
3. @Component（{}）デコレータで定義されているように、このモーダルコンポーネントのマークアップをホスト/親コンポーネントに含めて開くことはできますか？
4. 理想的には、ホストコンポーネントのコードを、私はselectRecordModal.onSelected(selectedItem => { .... }).onCancelled(() => { ... });

Answer 1

あなたは材料設計を使用して考えがありますような何かを呼び出すことができるようにしたいですか？そうであれば、メニューからアラートまであらゆるものに使用できるので、彼らは「モダール」を単にオーバーレイと呼んでいます。

それ以外の場合は、主にCSSを使用し、簡単なonclickイベントを使用して読み込み/終了することができます。 InfactあなたはちょうどCSSでそれを行うことができますが、ブラウザのサポートが限られています。

このようなもの： http://drublic.github.io/css-modal/#！ どちらも対応ie8（種類）