~Linux、MySQLからAJAXまでAngular2でカスタム構造ディレクティブ作成Angular2でユーザー定義の構造ディレクティブを作成する方法を確認しました。※Angular2の2.0.0版、TypeScriptを使って確認したものです。(デモはv4.4.3、v2.0.0で動作確認)※目次をクリックすると目次の下部にコンテンツが表示されます。1.3つのタイプのディレクティブの概要2.カスタム構造ディレクティブのサンプル作成3.デモ3つのタイプのディレクティブの概要1コンポーネント・最も一般的なディレクティブで、テンプレートと共に定義。directives)・DOM用要素を追加、除去する事によってDOMのレイアウトを変更する。・NgFor、NgIf、NgSwitchのビルトインディレクティブが代表的。directives)・要素の外観や振る舞いを変更するディレクティブ。・NgStyleビルトインディレクティブは、いくつかの要素スタイルを同時に変更できる。・@Directiveデコレーターで注釈したコントローラークラスを定義。・@Directiveデコレーターでは、そのディレクティブに結びつく属性を識別するセレクタを指定する。・コントローラクラスでそのディレクティブの振る舞いを実装する。・コンストラクタで、TemplateRefとViewContainerRefを指定し、インジェクトする。・ViewContainerRefは、<template>要素の結果として生成され、このアクションが実行されるカレントビューの位置を表す。・ビューは、ViewMetadataの子、<template>要素の兄弟として生成される。したがって、子ビュー内のディレクティブはそれを生成したディレクティブをインジェクトすることができない。・テンプレート上の組み込みビューをインスタンス化するには、ViewContainerRefを使用する。これは、ビューを生成し、ビューコンテナーに付与する。EmbeddedViewRef・templateRefに基づく組み込みビューをインスタンス化し、コンテナー内の指定した位置に挿入する。indexが未指定の場合は、新しいビューはコンテナー内の最後に挿入される。○clear()・コンテナー内のすべてのビューを破棄する。●TemplateRef・組み込みビューをインスタンス化するのに使用される組み込みテンプレートを表す。・<template>要素または”*”でプレフィックスされたディレクティブに配置されたディレクティブを介してTemplateRefにアクセスできる。<template>要素は以下のように短縮形式で記述することができる。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。