ionic v3의 맞춤 구성 요소

간단한 구성 요소를 만들어 페이지에 포함하려고했습니다. 나는 그것을 다음과 같이 만들었다.ionic g component my-header(ionic-cli v3 beta), IonicPageModule 버그를 수정 한 다음 다른 페이지에 추가했습니다. 다음이 오류가 발생합니다.

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.

"MyHeaderComponent"가 @NgModule 선언에 자동으로 추가되었습니다.

당신의 도움을 주셔서 감사합니다.

편집하다:

구성 요소가 내 안에 있습니다.components폴더:

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 페이지

Andreas Gassmann

출처 angular ionic2 ionic3

구성 요소에 대한 별도의 module.ts 파일이 있습니까? - Suraj Rao
예, 구성 요소와 관련된 전체 코드를 추가했습니다. - Andreas Gassmann
이 질문에 대한 답변이나 새로운 질문이 필요하다고 생각하지 마십시오. 게으른 페이지에이 오류가 발생했기 때문에 여기에 왔습니다. 수입 된 수입에 대한 답변과 함께ComponentsModule페이지 모듈에 컴포넌트를 추가해야했습니다.entryComponents질문에 표시된 구성 요소 모듈의 - Jason Goemaat

6 답변

너 가져올 필요 없어.MyHeaderComponentngModule에서.

가져와야합니다.MyHeaderComponentModule이것을 사용하려는 페이지 모듈에서

 imports: [
    MyHeaderComponentModule,
  ],

감사합니다. 페이지 모듈에서 가져 오기에 대해 생각하지 않았습니다.home.module.ts직접. 어떤 이유에서든 내 제품을 가져 오면 작동하지 않습니다.app.module.ts. 나는 그것을 "gobally"로 이용할 수 있다고 생각했기 때문에 이전에 그것을 시도했다. - Andreas Gassmann
Ionic 3가 가져 오기에는 넣지 않고 페이지 모듈을 선언해야합니다. - Zeeshan Anjum
@ ZeeshanAnjum 모듈이 가져 오기에 포함됩니다. 페이지 / 구성 요소 선언에 들어가기 - Suraj Rao

이온 3은 지연로드를 지원하기 때문에 앱에서 사용자 정의 구성 요소를 가져올 필요가 없습니다. module.ts 파일. 대신 특정 페이지의 module.ts 파일에서 가져올 수 있습니다. 예 : 홈페이지에서 맞춤 구성 요소를 사용하려면 다음과 같이 home.module.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 {
 
}

그러나 사용자 정의 구성 요소를 만들 때 자동으로 추가되는 app.module.ts 파일에서 가져 오기 및 선언을 제거하는 것을 잊지 마십시오.

괜찮아, 고마워! - Zaza
나는 내 의견을 움직여야 해.MyHeaderComponent...에서declarations에imports그렇지 않으면 작동하지 않습니다. - Georg Kastenhofer
@Sid Puttur 2 페이지 이상의 구성 요소 (UserCardComponent)를 사용하고 싶습니다. 내 HomePage 모듈의 구성 요소를 선언하고 잘 사용할 수 있지만 다른 모듈에서 선언하려고 할 때 오류가 발생했습니다 "Type UserCardComponent는 2 개의 모듈 선언 중 일부입니다 : HomePageModule 및 ContactsPageModule! UserCardComponent를 HomePageModule 및 ContactsPageModule을 가져 오는 상위 모듈로 이동하는 것을 고려하십시오. UserCardComponent를 내보내고 포함하는 새로운 NgModule을 만들어 HomePageModule 및 ContactsPageModule에 NgModule을 가져올 수도 있습니다. " - Sarah

그냥 명확히하기 위해 : 나는 많은 페이지 (재사용 가능한 구성 요소)에서 사용자 지정 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 {}

참고 : navigatorComponent에는 ts, css, html 및 yourcomponentname.module.ts라는 4 개의 파일이 있습니다. "ionic g component"명령은 마지막 파일 (yourcomponentname.module.ts)을 생성하지 않습니다. 그래서 나는 그것을했다.

이온 성 g 성분은 "성분 mts.ts" 그것은 이온의 모든 구성 요소를 포함하는 하나의 모듈입니다. 이 모듈은 NgModule 가져 오기에 포함되어야합니다. - Aragorn

여기 내 모듈이 있습니다. 희망이 당신의 질문에 대답하는 데 도움이됩니다 :

@NgModule({
  declarations: [
    TestPage
  ],
  imports: [
    IonicPageModule.forChild(TestPage),
    TranslateModule.forChild(),
    PipesModule,
    NavigatorComponentModule
  ],
  exports: [
    EntriesPage,
  ],
  providers:[
    NavigatorComponent
  ]
})

스레드에 대한 늦은 답변이지만이 정보를 사용할 수있는 사람들이 다른 관점에서 설명되어있을 것입니다.

Ionic에서 사용자 정의 각 구성 요소는 별도의 모듈로 구성됩니다.ComponentsModule. 첫 번째 구성 요소가ionic generate component, 구성 요소와 함께 이온은ComponentsModule. 이후의 모든 구성 요소는 동일한 모듈에 추가됩니다.

여기에 샘플이있다.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. 이온 생성 요소 (v 4.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 {}

-1

모듈에서 구성 요소를 가져와야합니다. 해당 구성 요소도 내보내십시오.

@NgModule({
    imports: [
        IonicModule,
    ],
    declarations:[
        MyHeaderComponent
    ],
    exports:[
        MyHeaderComponent
    ],
    entryComponents:[
        MyHeaderComponent
    ]

})

슬프게도 여전히 나를 위해 일하지 않습니다. 코드 샘플을 포함하도록 내 질문을 업데이트했습니다. - Andreas Gassmann
내가 작성한 코드는 app.module.ts에 있어야합니다. - ACES
그 중 하나가 작동하지 않습니다 ... suraj의 답변을 사용하여 해결했지만 도움을 주셔서 감사합니다! - Andreas Gassmann

ionic v3의 맞춤 구성 요소

6 답변

연결된 질문

최근 질문