在 Material <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>

但是，我想将每个选项卡的功能及其内容模块化成单独的 Angular 2 组件，如下所示：

app.component.html

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

我目前的结构遵循基本的 Angular 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（带标签的画廊）、PictureGridComponent（显示图片网格）和 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>

图片组件模板：

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

如果选项卡是可枚举的对象，您可以随时尝试使用 ngFor 创建它们（我没有测试过）。