使用材質<md-tab-group>內的Angular 2組件

Question

我開始使用Angular 2/Material Design項目，並在嘗試使用<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成分約定，例如：

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>元素每個組件的模板中，像這樣。

<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>中提取<md-tab>元素。對我來說，將所有選項卡及其內容包含在一個單獨的html文件中似乎很麻煩，更不用說擊敗組件的目的了。如果有可能，我會很感激任何關於如何正確設置它的指導。提前致謝！

Answer 1

放入選項卡的組件不應該依賴於選項卡。因此，他們不應該被包裝在md-tab的模板中。材質標籤被設計爲一個容器，您可以隨時隨地放置任何您想要的內容。它服務於單一責任的目的，而不是打敗它。

編輯 根據要求，它可能是什麼樣子的樣本。我假設有三個組件：GaleryComponent（具有選項卡的圖庫），PicturesGridComponent（顯示圖片的網格）和PictureComponent（顯示格式化的圖片）。模板被簡化以顯示嵌套組件的結構。

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創建它們（我沒有測試）。