在材质中使用Angular 2组件<md-tab-group>

时间:2017-04-05 05:14:47

标签: javascript angular components material-design angular-material

我正在开始使用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文件中似乎很麻烦,更不用说破坏组件的用途了。如果有可能,我会感激任何有关如何正确设置的指导。提前谢谢!

1 个答案:

答案 0 :(得分: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>

如果tabs是一个可枚举的对象,你总是可以尝试使用ngFor创建它们(我没有测试它)。