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