使用材质<md-tab-group>内的Angular 2组件

我开始使用Angular 2/Material Design项目，并在尝试使用<md-tab-group>组件时遇到问题。我见过的一般结构的例子如下所示：使用材质<md-tab-group>内的Angular 2组件

<md-tab-group> 
    <md-tab label="Gallery"> 
    //gallery content here 
    </md-tab> 
<md-tab label="Settings"> 
    //setting content here 
    </md-tab> 
</md-tab-group>

不过，我想模块化每个选项卡的功能和它的内容到单独的角2层的组件是这样的：

应用。 component.html

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

我现在共有结构遵循基本角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文件中似乎很麻烦，更不用说击败组件的目的了。如果有可能，我会很感激任何关于如何正确设置它的指导。提前致谢！

来源

2017-04-05 mikeym

你会得到什么样的错误？另外我不能在'app.component.html'中看到为'app-settings'定义的选择器。 –

我刚刚使用了一个组件，''作为示例和简洁。 ''存在并且构造完全相同。对困惑感到抱歉。 – mikeym

放入选项卡的组件不应该依赖于选项卡。因此，他们不应该被包装在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>

如果标签是一个枚举对象，你总是可以尝试与ngFor创建它们（我没有测试）。

来源

2017-04-05 05:58:43 dzejdzej

您可以根据我的问题的应用程序结构和“”组件示例添加一段代码。我知道它的工作原理，但认为对于可能遇到此问题的其他人而言，您的答案可能并不完全清楚。干杯! – mikeym

使用材质<md-tab-group>内的Angular 2组件

回答

相关问题