이온 3 사용자 정의 구성 요소 가져 오기

당신은 아래처럼 그것을 할 필요가있다 :

import { ComponentsModule } from "../../components/components.module";
@NgModule({
  declarations: [
    OtherPage,
    ComponentsModule,
  ],
  imports: [
    IonicPageModule.forChild(OtherPage),

    ],
  entryComponents: [
    ComponentsModule
  ]
})
export class OtherPageModule {}

• 이 기능을 시도했지만 구성 요소가 여전히 앱에서 알 수 없습니다. - fitzmode

귀하는test구성 요소.

@NgModule({
  declarations: [
    TestComponent,
  ],
  imports: [],
  exports: [TestComponent]
})
export class ComponentModule {}

• 구성 요소는 이미 components.module.ts- - fitzmode

여기에 표시된대로https://github.com/ionic-team/ionic/issues/11560

불행히도 게으른로드 구성 요소, 지시문, 파이프를 만드는 방법은 없습니다. 어떤 방법 으로든 우리가 관리한다면 알려주세요.

따라서 page.module.ts에 ComponentsModule을 가져올 수 있습니다. 여기 내거야.

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { ComponentsModule } from ../../components/components.module';

@NgModule({
  declarations: [
    WoDetailsPage,

  ],
  imports: [
    ComponentsModule,
    IonicPageModule.forChild(WoDetailsPage),
  ],
})
export class WoDetailsPageModule {}

• IonicForum- 토의yubin_zhu분명히, IonicModule 만 가져 오면forChild또는forRoot속임수를 쓰자. 내가 테스트 한만큼, 이것은 나를 위해 일했다.@NgModule({ imports:[IonicModule], //no forRoot here declarations:[HomePage], exports:[HomePage], entryComponents:[HomePage] //<-- add all your module components to here }) - Sameer Achanta

한 가지 방법은 각 구성 요소를 app.module.ts 파일에 추가 한 다음 다음과 같이 선언하는 것입니다.

import { MyComp } from "../../components/my-comp/my-comp";
@NgModule({
  declarations: [
    OtherPage,
    MyComp
  ],
  imports: [
    IonicPageModule.forChild(OtherPage)
    ],
})
export class OtherPageModule {}

이것은 내가 그것을 어떻게 해결 했는가이다.

1. 가정 해 보겠습니다.custom-component.ts수출 수업CustomComponent.

2. 같은 수입custom-component.module.ts아래 그림과 같이:

   import { CustomComponent } from './custom-component';
   
   @NgModule({
     declarations: [
       CustomComponent,
     ],
     imports: [
       IonicPageModule.forChild(CustomComponent),
     ],
     exports : [ CustomComponent ]
   })
   export class CustomComponentPageModule { }
   

3. 이제 아래와 같이 사용자 정의 구성 요소를 원하는 페이지에 가져옵니다.

   import { ContentDrawerPageModule } from '../../../components/custom-component/custom-component.module';
   
   @NgModule({
     declarations: [
       HelloWorldPage,
     ],
     imports: [
       IonicPageModule.forChild(HelloWorldPage),
       CustomComponentPageModule,
     ]
   })
   export class HelloWorldPageModule {}
   

그리고 사용자 정의 구성 요소를 성공적으로 가져 왔습니다.(CustomComponent)귀하의 페이지로(HelloWorldPage).

• 보풀 @jps를 제거해 주셔서 감사합니다. - Kapil Sharma

성공적으로CUSTOM_ELEMENTS_SCHEMA선언을 내 모듈에 넣고 선택 자의 이름을 "-"대시로 지정하도록 강요하므로 다음과 같이 사용해야합니다.

<MyPlayer-comp></MyPlayer-comp>

나는 그것이 작동하고 ngc가 "... 알려진 요소가 아닌 ..."에 대해 더 이상 불평하지 않아도 이러한 프레임 워크의 낙타 사건 괴물들로부터이 총체적이지 않은 의미로 화를 냈습니다.

나는 개인적으로취하다모든 것을 똑같이 (클래스, 선택자, 파일 등 ...)

나는 웹을 위해 빌드하는 동안 지연로드로 작업하는 다음으로 되돌아 갔다. (ionic cordova 빌드 브라우저 --prod - release)

사용자 정의 구성 요소 모듈 선언 :

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
//
import { MyPlayerComp } from './MyPlayerComp ';
//
@NgModule({
    declarations: [MyPlayerComp ],
    imports: [IonicPageModule.forChild(MyPlayerComp )],
    exports: [MyPlayerComp ],
})
export class MyPlayerCompModule { }

사용자 지정 구성 요소를 사용하려는 모듈에서 다음을 사용하십시오.

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
//
import { PlyrView } from './PlyrView';
//
import { MyPlayerCompModule } from './MyPlayerComp.module' // 20180720
//
@NgModule({
    declarations: [PlyrView],
    imports: [
        IonicPageModule.forChild(PlyrView),
        MyPlayerCompModule,                      // <<<<<
    ],                
    exports: [PlyrView],
})
export class PlyrViewModule { }

나는 이것이 누군가를 돕기를 바란다.

이것은 아래의 링크를 따라 그것을 해결하는 방법입니다 :

http://evalogical.com/blog/components-ionic-framework-3

1. 에서 구성 요소 가져 오기home.ts이런 식으로 파일,
   
   import { MyComponent } from '../../components/my/my';

2. 에서home.module.ts수입하다ComponentsModule이렇게 가져 오기에 추가하십시오.

   import { NgModule } from '@angular/core';  
   import { IonicPageModule } from 'ionic-angular';  
   import { HomePage } from './home';  
   import { ComponentsModule } from '../../components/components.module';  
   @NgModule({  
   declarations: [  
   HomePage,  
   ],  
   imports: [  
   IonicPageModule.forChild(HomePage),  
   ComponentsModule  
   ],  
   })  
   export class HomePageModule {}
   

3. 에서 IonicPageModule 가져 오기components.module.ts파일을 가져오고 여기에 가져와야합니다.CUSTOM_ELEMENTS_SCHEMA이런 스키마에서.

   import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';  
   import { MyComponent } from './my/my';  
   import { IonicPageModule } from 'ionic-angular';  
   @NgModule({  
   declarations: [MyComponent],  
   imports: [IonicPageModule.forChild(MyComponent)],  
   exports: [MyComponent],  
   schemas: [CUSTOM_ELEMENTS_SCHEMA]  
   })  
   export class ComponentsModule {}  
   

4. 행 제거
   
   import { HomePage } from '../pages/home/home';~로부터app.module.ts파일 대신 다음 줄을 추가하십시오import { HomePageModule } from '../pages/home/home.module';

5. 이제 구성 요소의 선택기를 HTML 태그로 사용할 수 있습니다.home.html파일