材料内の角2コンポーネントの使用<md-tab-group>

Question

角度2 /材料設計プロジェクトを開始しており、<md-tab-group>のコンポーネントを使用しようとすると問題が発生しました。私は、次のような一般的な構造の例を見てきました：

<md-tab-group> 
    <md-tab label="Gallery"> 
    //gallery content here 
    </md-tab> 
<md-tab label="Settings"> 
    //setting content here 
    </md-tab> 
</md-tab-group> 

しかし、私は、各タブの機能をモジュール化したいのですが、それはこのような別の角度2つのコンポーネントに内容です：

アプリ。 component.html

<md-tab-group> 
    <app-gallery></app-gallery> 
    <app-settings></app-settings> 
</md-tab-group> 

私が現時点で持っている構造は、例えば、基本的な角度2コンポーネントの規則に従います。

私はそのようにように、各コンポーネントのテンプレート内 <md-tab>要素を使用

gallery.component.ts

import { Component, OnInit } from '@angular/core'; 
import {Http} from '@angular/http'; 

@Component({ 
    selector: 'app-gallery', 
    templateUrl: './gallery.component.html', 
    styleUrls: ['./gallery.component.css'] 
}) 
export class GalleryComponent implements OnInit { 

    constructor() { } 

    ngOnInit() { 
    } 

} 

。

<md-tab label="gallery"> 
    <p>Gallery here...</p> 
</md-tab> 

最後に、すべてがインポートされ、適切に宣言されていることを確認しました。

app.module.ts

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { FormsModule } from '@angular/forms'; 
import { HttpModule } from '@angular/http'; 
import { MaterialModule } from '@angular/material'; 
import { AppComponent } from './core/app.component'; 
import 'hammerjs'; 
import { GalleryComponent } from './gallery/gallery.component'; 


@NgModule({ 
    declarations: [ 
    AppComponent, 
    GalleryComponent 
    ], 
    imports: [ 
    BrowserModule, 
    FormsModule, 
    HttpModule, 
    MaterialModule.forRoot() 
    ], 
    providers: [], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 

これは可能ですか？現時点では、おそらく要素を<md-tab-group>から抽出することはできないと思われます。私にとっては、コンポーネントの目的を破るだけでなく、すべてのタブとその内容を単一のhtmlファイルに含めることは面倒です。可能な場合は、正しく設定する方法に関するガイダンスに感謝します。前もって感謝します！

Answer 1

タブに入れたコンポーネントは、タブに依存してはいけません。したがって、テンプレートのmd-tabには囲まないでください。マテリアルタブは、あなたが望むほぼすべてのコンテンツをどこにでも置くことができるコンテナとして設計されています。それは敗北ではなく、単一責任の目的を果たします。

編集 要望どおり、どのように見えるかのサンプル。 GaleryComponent（タブ付きギャラリー）、PicturesGridComponent（画像のグリッド表示）、PictureComponent（フォーマットされた画像の表示）の3つのコンポーネントがあるとします。テンプレートは、入れ子になったコンポーネントの構造を示すために簡略化されています。

GaleryComponentテンプレート：

<md-tab-group> 
    <md-tab label="cats"> 
    <app-pictures-grid [pictures]="catPictures"></app-pictures-grid> 
    </md-tab> 
    <md-tab label="dogs"> 
    <app-pictures-grid [pictures]="dogPictures"></app-pictures-grid> 
    </md-tab> 
</md-tab-group> 

PictureComponentテンプレート：

<app-picture *ngFor="let picture of pictures" [picture]=picture> 

タブが列挙オブジェクトであれば、あなたは常にngFor（私はそれをテストしていない）でそれらを作成しようとすることができます。