간단한 컴포넌트를 만들어 페이지에 포함시키고 싶었습니다. 'ionic g 컴포넌트 my-header'(ionic-cli v3 베타)로 컴포넌트를 생성하고 IonicPageModule 버그를 수정한 다음 다른 페이지에 <my-header</my-header<를 추가했습니다. 그런 다음 이 오류가 발생합니다:
Error: Uncaught (in promise): Error: Template parse errors:
'my-header' is not a known element:
1. If 'my-header' is an Angular component, then verify that it is part of this module.
2. If 'my-header' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
내 머리글 컴포넌트가 @NgModule 선언에 자동으로 추가되었습니다.
도와주셔서 감사합니다.
편집:
컴포넌트는 내 '컴포넌트' 폴더 안에 있습니다:
components/my-header/my-header.html
<div>
{{text}}
</div>
components/my-header/my-header.module.ts
import { NgModule } from '@angular/core';
import { IonicModule } from 'ionic-angular';
import { MyHeaderComponent } from './my-header';
@NgModule({
declarations: [
MyHeaderComponent,
],
imports: [
IonicModule,
],
exports: [
MyHeaderComponent
],
entryComponents:[
MyHeaderComponent
]
})
export class MyHeaderComponentModule {}
components/my-header/my-header.scss
my-header {}
components/my-header/my-header.ts
import { Component } from '@angular/core';
@Component({
selector: 'my-header',
templateUrl: 'my-header.html'
})
export class MyHeaderComponent {
text: string;
constructor() {
console.log('Hello MyHeaderComponent Component');
this.text = 'Hello World';
}
}
app/app.module.ts
/* imports */
import { MyHeaderComponent } from '../components/my-header/my-header';
@NgModule({
declarations: [
MyApp,
MyHeaderComponent
],
...
pages/home/home.html
<my-header</my-header<
이후 이오니아의 3 개의 지원으로드,당신을 가져올 필요가 없습 맞춤 구성 요소입니다. 모듈입니다.ts 파일입니다. 대신 가져올 수 있습니다 그것은 특정 페이지를's 모듈이 있습니다.ts 파일입니다. 예를 들어 사용하려는 경우 사용자 지정 구성에서 당신의 홈페이지할 수 있습니다 그냥 가져옵니다.모듈입니다.ts 으로 파일을 아래와 같습니다:
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { HomePage } from './home';
import { MyHeaderComponent }from '../../components/myheader/myheader';
@NgModule({
declarations: [
HomePage,
MyHeaderComponent
],
imports: [
IonicPageModule.forChild(HomePage),
],
exports: [
HomePage,
]
})
export class HomePageModule {
}
그러나지 않't 를 제거하는 것을 잊지 가져오기 및 선언 응용 프로그램에서.모듈입니다.ts 파일에 추가되는 자동으로 생성할 때 사용자 정의 구성 요소입니다.
늦은 대답은 스레드에 대해 하지만 나는'm 있's 는 더 많은 사람들이 정보를 사용할 수 있습에서 설명한 다른 관점입니다.
에서 이오니아,사용자 정의 각 구성 요소에 따라 구성되는 별개의 모듈이라는ComponentsModule
. 을 때 첫 번째 구성요소를 이용하여 생성이온을 생성하는 구성 요소
,함께 구성 요소,이온을 생성하는ComponentsModule
. 이후의 모든 구성 요소를 추가하는 경우 동일한 모듈,그렇게 하는 것이 맞습니다.
여기's 샘플ComponentsModule
import { NgModule } from '@angular/core';
import { CustomAngularComponent } from './custom/custom-angular-component';
import { IonicModule } from 'ionic-angular';
@NgModule({
declarations: [CustomAngularComponent],
imports: [IonicModule],
exports: [CustomAngularComponent],
entryComponents:[
]
})
export class ComponentsModule {}
을 사용하는ComponentsModule
,응용 프로그램에서 다음과 같은 다른 어떤 모듈은,ComponentsModules 할 필요가 있을 수입하는
AppModule`. 이온을 생성하는 구성 요소(v4.12)를 추가하지 않 이 단계는,그래서 이것은 추가 할 수 있습니다.
의 발췌 AppModule:
@NgModule({
declarations: [
//declaration
],
imports: [
//other modules
ComponentsModule,
],
bootstrap: [IonicApp],
entryComponents: [
//ionic pages
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler},
//other providers
]
})
export class AppModule {}
여기는 제 모듈이 있습니다. 희망은 도움이 될 것입니다 당신은 당신의 질문에 대답:
@NgModule({
declarations: [
TestPage
],
imports: [
IonicPageModule.forChild(TestPage),
TranslateModule.forChild(),
PipesModule,
NavigatorComponentModule
],
exports: [
EntriesPage,
],
providers:[
NavigatorComponent
]
})
을 명확히 나는 사용자 지정 navigatorComponent 에서는 많은 페이지(재사용할 수 있는 구성요소).
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { TranslateModule } from '@ngx-translate/core';
import { PipesModule } from '../../pipes/PipesModule';
import { NavigatorComponent } from '../../components/navigator/navigator';
import { ComponentsModule } from '../../components/components.module';
import { NavigatorComponentModule } from '../../components/navigator/navigator.module';
@NgModule({
declarations: [
TestPage,
],
imports: [
IonicPageModule.forChild(EntriesPage),
TranslateModule.forChild(),
PipesModule,
NavigatorComponentModule
],
exports: [
TestPage,
],
providers:[
NavigatorComponent
]
})
export class TestPageModule {}
참고:navigatorComponent4 일:ts,css,html 및 yourcomponentname.모듈입니다.ts. "이오니아 g component