Angular 2/Material Design 프로젝트를 시작하고 <md-tab-group>
인 구성 요소를 사용하려고 할 때 문제가 발생했습니다.<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 파일에 포함시키는 것이 성가신 일로 보인다. 컴포넌트의 목적을 물리 칠 필요는 없다. 가능한 경우 제대로 설정하는 방법에 대한 안내에 감사드립니다. 미리 감사드립니다!
어떤 종류의 오류가 발생합니까? 또한 나는'app.component.html'에'app-settings'을 위해 정의 된 어떤 선택자를 볼 수 없습니다. –
방금 예를 들어 설명하기 위해 하나의 구성 요소 ''을 사용했습니다. ''가 존재하며 정확히 동일하게 구성됩니다. 혼란을 드려 죄송합니다. –
mikeym