この記事では、NG-ブートストラップ・プロジェクト、分析タブセットの実現を説明します。
使用
<ngb-tabset>コンテナ要素として、タブその各々に<ngb-tab>要素定義、<ngb-tabset>多数含ま<ngb-tab>サブ要素。
では<ngb-tab>要素、使用<ng-template>タイトルと内容：コンテンツを定義するためのテンプレートを、コンテンツの2種類に分かれています。
使用してタイトル[ngbTabTitle]を宣言、またはするディレクティブを<ngb-tab>要素の使用title属性宣言を。
コンテンツ使用[ngbTabContent]指示書。
< NGB-タブセット> < NGB-タブのタイトル= "シンプル" > < NG-テンプレートngbTabContent > < P > 生デニムのジーンズのショートパンツオースティンあなたはおそらくそれらを聞いていません。豆腐stumptownいくつかのレトロなシンセにしないでください レモネードダイエット。口ひげ決まり文句時間、ウィリアムズバーグカルレス・スイスのビーガン。肉屋はクーフィーヤバック批判 ドリームキャッチャーシンセを。コスビーセーターサッカーbanhの藩主、イカからそのcupidatatテリー・リチャードソンのために。Aliquip彼はサルビアcillumの喜ばも iphoneを。セイタンaliquipどんな男カーディガン、アメリカンアパレル、肉屋の喜び、そうでない場合。</ P > </ NG-テンプレート> NGB-タブ> < NGB-タブ> < ngの鋳型ngbTabTitle > < B >ファンシー</ B >タイトル</ NG-テンプレート> < ngの鋳型ngbTabContent > フードトラックピストのlocavore、accusamusのマックスイーニーのマーファのNULLAシングルオリジンコーヒーイカ。 < P > Exercitation 1 laboreのvelit、ブログ仕立てPBRレギンス、次のレベルのウェス・アンダーソン職人フォー・ロコファームにテーブル クラフトビール灰汁抜けのしました。クワイ=写真ブース活版、commodoのenimクラフトビールmlkshkのaliquipのジーンズのショートパンツullamco広告ビニール cillumのPBR。一度に大変な努力を取る、nostrud有機は美的のために選択された男がmollifiedされます。ショルダーキーボードのHelvetica VHSのサルビア 年、ベロマグナvelit sapiente labore stumptown。ビーガンファニーパックodioのcillumのウェス・アンダーソン8ビット、持続可能なジーンズの ショートパンツのひげUT DIY倫理culpaのテリー・リチャードソンのバイオディーゼル。アートパーティーscenesterのstumptown、tumblrの肉屋ベロ SINTのQUIのsapienteのaccusamusは、エコー公園を入れ墨。</ P > </ NG-テンプレート> </ NGB-タブ> < NGB-タブタイトル= "無効" [無効] = "真" > < NG-テンプレートngbTabContent > < P >しかし、便宜上、ライオンはそれはSAPIENメンバーがELITのDIAMを必要とする航空会社よりも時間がかかります。NULLA。Donecのinterdumのaliquet odio Donec性排出物ligula履歴書。高校の宿題を卒業、悲しみは、開発者、トップとハードウェアを必要としています。喉の宿題矢筒の選手。各バレーボール、バスケットボールのための喪の円弧と卒業とテレビ。しかし、彼または、週末や週末に接続されたポット直径、。現在の生態系のマクロアルコール。Vivamus faucibus nisl、また私はeuismodのfacilisis interdumエロスイプサムください。サッカーや飲み物は、開発者がサッカーを嫌い。瞬時に様々な臨床Penatibusスーパーボウルの山々 。、クリニック、また交流Loremのaliquetのultriciesのmaurisのaliquetの憎悪。Euのボートやマクロまたはセラミック枕。</ P > </ NG-テンプレート> </轟音タブ> </ 轟音タブセット>
あなたが見ることができ、外側の要素があります<ngb-tabset>。
エレメント使用して各タブ<ngb-tab>の定義は、使用したタブのコンテンツ<ng-template>のタイトルやコンテンツ：テンプレート定義は、コンテンツタブには2つの部分に分かれています。
ここでは、テンプレートのタイトルです
< ngのテンプレートngbTabTitle > < B >ファンシー</ B >タイトル</ ngのテンプレート>
タイトルはまたにすることができngb-tab上で使用する[title]属性定義。例えば：
< NGB-タブタイトル= "無効" [無効] = "真" >
本明細書で使用されるコンテンツ部分は、命令に定義されている[ngbTabContent]簡単に識別するために。
< NG-テンプレートngbTabContent > < P > しかし、利便性、ライオンが、それはSAPIENメンバーがELITのDIAMを必要とする航空会社よりも時間がかかります。 </ P > </ NG-テンプレート>
タブセットコンポーネント定義
前回の使用からわかるように、すべてのタブを定義することはあるngb-tabsetのではなく、使用中の定義コンテンツの要素ngb-tabse、独自のテンプレートを定義します。
だから、彼らが使用する必要が見つけContentChildrenを見つけること。
@ContentChildren（NgbTab）タブ：QueryList <NgbTab>。
使用しないでくださいContentChildの理由は、それが提供していないということであるdescendantsサポートを。
ブートストラップでは、各タブは、実際には2つの部分、現在表示されているタイトルのリスト、およびコンテンツにレンダリングされます。
タイトルのリストを使用してul処理するために。これは表示されているタイトルのすべてにループを使用します。
そして、titleTplテンプレートで定義され、使用され[ngTemplateOutlet]、それをレンダリングします。
< UL [クラス] = " 'NAV nav-' +型+（配向== '水平' '' + justifyClass： '？フレックス列'）" の役割= "tablist" > < リチウムのクラス= "NAV-項目" * ngFor = "タブのタブを聞かせて" > < [ID] = "tab.id" クラス= "NAV-リンク" [class.active] = "tab.id === activeId" [class.disabled] =」 tab.disabled」 HREF（クリック）= "（tab.id）を選択し、$ event.preventDefault（）" 役割= "タブを" [attr.tabindex] = "（tab.disabled '-1'：？未定義）" [attr.aria-コントロール] = "（！？destroyOnHide || tab.id === activeId tab.id + '-panel'：ヌル）" [attr.aria-選択] = "tab.id === activeId " [attr.aria無効] =" tab.disabled」> {{tab.title}} < ngのテンプレート[ngTemplateOutlet] = "tab.titleTpl？.templateRef" > </ ngのテンプレート> </ A > < / 李> </ UL >
タイトルセクションはサイドで二つのソース側を使用しています
{{tab.title}} <ngのテンプレート[ngTemplateOutlet] = "tab.titleTpl？.templateRef"> </ ngのテンプレート>
テンプレート定義を使用して、特定のコンテンツへのコンテンツ部分は、ので、ここで、外での使用である[ngTemplateOutlet]レンダリングされました。
< divのクラス= "タブコンテンツ" > < ngのテンプレートngForレットタブ[ngForOf] = "タブ" > < divの クラス= "タブ・ペイン{{tab.id === activeId 'アクティブ'：？ヌル} }」 * ngIf ！= "destroyOnHide || tab.id === activeId" 役割= "タブパネル" [attr.aria-labelledbyの] = "tab.id" ID = "{{tab.id} -パネル" > < ngのテンプレート[ngTemplateOutlet] = "tab.contentTpl？.templateRef" > </ NG-テンプレート> </ ディビジョン> </ テンプレート> </ DIV >
投影コンテンツがする必要があるContentイベントの種類を扱います。
ngAfterContentChecked（）{ // 入力として誤って設定されている可能性があり自動修正activeId activeTab =せ、この ._getTabById（この.activeId）。 この .activeId = activeTab？activeTab.id：（この .tabs.length？この .tabs.first.id：ヌル）; }
命令は、2つを定義します
定義命令は、非常に単純で、その後の使用のための参照テンプレートを取得することです。
あなたは、属性名は見ることができます templateRef
@Directive（{セレクタ'ngのテンプレート[ngbTabTitle]' }）
エクスポートクラスNgbTabTitle {
コンストラクタ（パブリックtemplateRef：TemplateRef <任意> ）{}
}
これは、[ngbTabContent]まだ属性を定義し、定義、上記と同じtemplateRef。
@Directive（{セレクタ'ngのテンプレート[ngbTabContent]' }）
エクスポートクラスNgbTabContent {
コンストラクタ（パブリックtemplateRef：TemplateRef <任意> ）{}
}
タブの定義
要素命令の種類、そうであってもテンプレートがなくなっています。
@Directive（{セレクタ「轟音タブ」}）
コンテンツは来ると予測されています。
以来tab、彼らは、テンプレートのアセンブリで定義されたテンプレートを使用すると、コマンドを識別するためにそれを使用して、ここで使用されているContentChildren識別するために。
@ContentChildren（NgbTabTitle、{子孫：偽 }）titleTpls：QueryList <NgbTabTitle> 。
@ContentChildren（NgbTabContent、{子孫：偽 }）contentTpls：QueryList <NgbTabContent>
あなたが使用することができますので、titleTplsとcontentTplsテンプレートを使用します。
それは内容ですので、あなたが必要なcontentイベント処理を、実際には、各タブでは、我々は声明の唯一のタイトルと内容を持っています。
ngAfterContentCheckedは（）{ // 我々が使用されている角度のバージョンのように代わり@ContentChildの@ContentChildrenを使用している // 偽}オプション：のみ@ContentChildren私たちは{子孫を指定することができます。 // {子孫：偽}なしで、我々はバグをヒットしているに記述： // https://github.com/ng-bootstrap/ng-bootstrap/issues/2240 この .titleTpl = この.titleTpls.first。 この .contentTpl = この.contentTpls.first。 }