Question

我想创建一个简单的组件并将其包含在页面上。我使用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文件夹中：

组件/我的报头/我的-header.html中

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

组件/我的报头/我的-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 {}

组件/我的报头/我的-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

由于ionic 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 2

您无需在ngModule中导入MyHeaderComponent。

您应该在您要使用此功能的页面模块中导入MyHeaderComponentModule。

 imports: [
    MyHeaderComponentModule,
  ],

Answer 3

该线程的最新答案，但我敢肯定还有更多的人可以使用此信息，从另一个角度解释。

在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 {}

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 {}

注意：navigatorComponent有4个文件：ts，css，html和yourcomponentname.module.ts。 “ionic g component”命令不会生成最后一个文件（yourcomponentname.module.ts）。所以我做到了。

Answer 6

您必须导入模块中的组件。确保您还导出该组件。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<link href="//code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<div class="container">
  <p>This is a datepicker example using jquery, jquery ui, and jquery css</p>
<form>
Date:
<input id="datepicker">
</form>
</div>

离子v3中的自定义组件

6 个答案: