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的模板中。材料选项卡设计为一个容器，您可以放置在任何位置，几乎可以放置任何内容。它的目的是承担单一责任，而不是打败它。

修改根据要求，可以看一下它的样子。我假设有三个组件：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创建它们（我没有测试它）。

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

1 个答案: