<md-tab-group>

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> 

그러나, 나는 각 탭의 기능을 모듈화하고 싶습니다 그리고이 같은 별도의 코너 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> 

마지막으로 모든 항목을 가져 와서 올바르게 선언했습니다.

는

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 { } 

이 가능 app.module.ts? 지금은 아마 요소를 <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> 

, 당신은 항상 (내가 그것을 테스트하지 않았다) ngFor로 만들려고 할 수 있습니다.