javascript - 在 Material 中使用 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>来自 <md-tab-group> 的元素.对我来说，将所有选项卡及其内容包含在一个 html 文件中似乎很麻烦，更不用说破坏组件的目的了。如果可以的话，我将不胜感激有关如何正确设置它的任何指导。提前致谢!

Answer 1

您放入选项卡中的组件不应依赖于选项卡。因此，不应将它们包装在模板中的 md-tab 中。 Material 选项卡被设计成一个容器，您可以把它放在任何地方，几乎可以放任何您想要的内容。它服务于单一责任的目的，而不是破坏它。

编辑根据要求，它的外观示例。我假设有三个组件:GaleryComponent(带选项卡的图库)、PicturesGridComponent(显示图片网格)和 PictureComponent(显示格式化图片)。简化模板以显示嵌套组件的结构。

画廊组件模板:

<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 创建它们(我没有测试过)。