이오니아 4 맞춤 구성 요소

마침내 이것을 알아 냈습니다.

ionic start myProject blank --type=angular
ionic g module components
ionic g component components/myComponent --export

이렇게하면 "myComponent"의 구성 요소 모듈에 선언과 내보내기가 모두 추가됩니다.

구성 요소를 사용하려면ComponentsModule너의 ~에게imports귀하의 페이지 모듈에서

@NgModule({
imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    ComponentsModule,
    RouterModule.forChild([
        {
            path: '',
            component: HomePage
        }
    ])
],
declarations: [HomePage]
})
export class HomePageModule { }

이렇게하면 아무 것도 추가되지 않습니다.app.module.ts그것이 어떻게되어야하는지입니다.

또한 사용자 지정 구성 요소에 모든 구성 요소를 사용하려면 다음을 추가해야합니다.IonicModule~로imports...에서components.module.ts

희망이 도움이 :-)

이것은 컴포넌트> 발 - 카드> 발 - 카드 .ts의 선택자입니다 :

import { Component } from '@angular/core';

@Component({
  selector: 'foot-card',
  templateUrl: 'foot-card.html'
})
export class FootCardComponent {

  text: string;

  constructor() {
    console.log('Hello FootCardComponent Component');
    this.text = 'Hello World';
  }

}

이것은 당신의 components.module.ts입니다 :

import { NgModule } from '@angular/core';
import { FootCardComponent } from './foot-card/foot-card';
import { IonicModule } from 'ionic-angular';

@NgModule({
    declarations: [FootCardComponent],
    imports: [IonicModule],
    exports: [FootCardComponent]
})

export class ComponentsModule {}

이것은 귀하의 app.module.ts입니다 :

import { FootCardComponent } from '../components/foot-card/foot-card';
import { ComponentsModule } from '../components/components.module'

@NgModule({
  declarations: [

  ],
  imports: [
    ComponentsModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    FootCardComponent
  ],
  providers: [
  ]
})
export class AppModule {}

가져올 때 구성 요소 모듈을 가져오고 add.module.ts의 입력 구성 요소에 component-name을 선언해야합니다.

components.module.ts에서, 당신은 컴포넌트를 선언하고 export해야하지만 IonicModule을 import하는 것을 잊지 말아야한다.

같은 문제에 직면했지만 아무도 IonicModule을 Components.module.ts에서 가져오고 app.module.ts에서 importcomponent를 가져오고 componentmodule 만 가져 오라고 말했습니다.

src / components 폴더

myComponent.html:

//Here your component HTML Code. For example:
<ion-list radio-group (ionSelect)="change($event, item.type);" 
  ... 
</ion-list>

components.module.ts:

import {myComponentComponent} from "./myComponent/myComponent";
@NGModule({
  declatations: [myComponentComponent],
  imports:[],
  exports: [myComponentComponent]
})
export class ComponentsModule{}

src / app 폴더

app.module.ts:

import { MyComponentComponent } from "../components/myComponent/myComponent";

@NGModule({
   declarations: [
      yourPages....,
     MyComponentComponent
   ]
)}

그것을 사용하려면 :

예를 들어HomePage.html:

<myComponent> </myComponent>

• 작동하지 않는 thats - yushin
• 작동하지 않는 것을 설명하십시오. - Jonathan
• & # 39; mycomponent & # 39; 알려진 요소가 아닙니다 : 1. & # 39; mycomponent & # 39; Angular 구성 요소 인 경우이 모듈의 일부인지 확인하십시오. 2. 모든 요소를 허용하려면 & # 39; NO_ERRORS_SCHEMA & # 39; & nbsp; @ NgModule.schemas & # 39; 이 구성 요소의 - yushin
• 그게 내가 받고있는 오류 thats - yushin
• 나는 내 대답을 편집한다. 이제는 효과가 있습니다. - Jonathan