आयनिक v3

Question

में कस्टम घटक मैं एक साधारण घटक बनाना चाहता था और इसे एक पृष्ठ पर शामिल करना चाहता था। मैंने इसे ionic g component my-header (आयनिक-क्ली वी 3 बीटा) के साथ बनाया, 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 घोषणाओं को जोड़ा गया है: मैं तो इस त्रुटि मिलती है।

आपकी मदद के लिए धन्यवाद।

संपादित करें:

घटकों/मेरी हेडर/मेरी-header.html

<div> 
    {{text}} 
</div> 

घटकों/मेरी हेडर/मेरी हेडर:

घटक मेरी components फ़ोल्डर के अंदर स्थित है .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 {} 

घटक/मेरा-हेडर/my-header.scss

my-header {} 

घटकों/मेरी हेडर/मेरी-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.module.ts

/* imports */ 
import { MyHeaderComponent } from '../components/my-header/my-header'; 

@NgModule({ 
    declarations: [ 
    MyApp, 
    MyHeaderComponent 
    ], 
... 

पृष्ठों/घर/home.html

Answer 1

आपको ngModule में MyHeaderComponent आयात करने की आवश्यकता नहीं है।

आपको अपने पृष्ठ मॉड्यूल में MyHeaderComponentModule आयात करना चाहिए जहां आप इसका उपयोग करना चाहते हैं।

imports: [ 
    MyHeaderComponentModule, 
    ], 

Answer 2

आपको मॉड्यूल में घटक आयात करना होगा। सुनिश्चित करें कि आप उस घटक को भी निर्यात करते हैं।

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

}) 

Answer 3

चूंकि आयनिक 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 फ़ाइल से अपने आयात और घोषणाओं को हटा दें जो स्वचालित रूप से जोड़े जाते हैं जब आप अपना कस्टम घटक बनाते हैं।

Answer 4

यहां मेरा मॉड्यूल है। आशा है कि यह आप अपने सवाल का जवाब में मदद मिलेगी:

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

Answer 5

बस स्पष्ट करने के लिए: मैं कई पृष्ठों (पुन: प्रयोज्य घटक) में एक कस्टम 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 {} 

नोट: ts, सीएसएस, एचटीएमएल और yourcomponentname.module.ts: navigatorComponent 4 फ़ाइलें है। "आयनिक जी घटक" कमांड अंतिम फ़ाइल (yourcomponentname.module.ts) उत्पन्न नहीं करता है। तो मैंने यह किया।