아이오닉 v3의 사용자 지정 구성 요소
간단한 컴포넌트를 만들어 페이지에 포함시키고 싶었습니다. '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<
22
6
이후 이오니아의 3 개의 지원으로드,당신을 가져올 필요가 없습 맞춤 구성 요소입니다. 모듈입니다.ts 파일입니다. 대신 가져올 수 있습니다 그것은 특정 페이지를's 모듈이 있습니다.ts 파일입니다. 예를 들어 사용하려는 경우 사용자 지정 구성에서 당신의 홈페이지할 수 있습니다 그냥 가져옵니다.모듈입니다.ts 으로 파일을 아래와 같습니다:
그러나지 않't 를 제거하는 것을 잊지 가져오기 및 선언 응용 프로그램에서.모듈입니다.ts 파일에 추가되는 자동으로 생성할 때 사용자 정의 구성 요소입니다.
은 당신이 당신을 가져오는
MyHeaderComponent에 ngModule.로 가져와야 합
MyHeaderComponentModule당신의 페이지에 있는 모듈을 사용하고 싶다.늦은 대답은 스레드에 대해 하지만 나는'm 있's 는 더 많은 사람들이 정보를 사용할 수 있습에서 설명한 다른 관점입니다.
에서 이오니아,사용자 정의 각 구성 요소에 따라 구성되는 별개의 모듈이라는
ComponentsModule. 을 때 첫 번째 구성요소를 이용하여 생성이온을 생성하는 구성 요소,함께 구성 요소,이온을 생성하는ComponentsModule. 이후의 모든 구성 요소를 추가하는 경우 동일한 모듈,그렇게 하는 것이 맞습니다.여기's 샘플
ComponentsModule을 사용하는
ComponentsModule,응용 프로그램에서 다음과 같은 다른 어떤 모듈은,ComponentsModules 할 필요가 있을 수입하는AppModule`. 이온을 생성하는 구성 요소(v4.12)를 추가하지 않 이 단계는,그래서 이것은 추가 할 수 있습니다.의 발췌 AppModule:
여기는 제 모듈이 있습니다. 희망은 도움이 될 것입니다 당신은 당신의 질문에 대답:
을 명확히 나는 사용자 지정 navigatorComponent 에서는 많은 페이지(재사용할 수 있는 구성요소).
참고:navigatorComponent4 일:ts,css,html 및 yourcomponentname.모듈입니다.ts. "이오니아 g component"명령하지 않't 생성된 최종 파일(yourcomponentname.모듈입니다.ts). 그래서 나는 그것을 했다.
모듈에서 컴포넌트를 가져와야 합니다. 해당 컴포넌트도 내보내야 합니다.