Question

我用：

创建了一个自定义组件

ionic generate component idioma

我做了同样的事情来创建一个页面：

ionic generate component table

现在我要做的是在我的页面表中使用我的组件idioma，这里是我正在使用的文件：

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';

import { IdiomaComponent } from '../components/idioma/idioma';

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    IdiomaComponent

  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    IdiomaComponent
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

idioma.ts

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

    /**
     * Generated class for the IdiomaComponent component.
     *
     * See https://angular.io/api/core/Component for more info on Angular
     * Components.
     */
    @Component({
      selector: 'idioma',
      templateUrl: 'idioma.html'
    })
    export class IdiomaComponent {

      text: string;

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

    }

components.module.ts

import { NgModule } from '@angular/core';
import { IdiomaComponent } from './idioma/idioma';
@NgModule({
    declarations: [IdiomaComponent],
    imports: [],
    exports: [IdiomaComponent]

})
export class ComponentsModule {}

table.html

<!--
  Generated template for the MesaPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>

  <ion-navbar>
    <ion-title>table</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>
<idioma></idioma>
</ion-content>

在table.html中我试图使用我刚刚创建的组件，但它给了我这个错误：

Uncaught (in promise): Error: Template parse errors:
'idioma' is not a known element:
1. If 'idioma' is an Angular component, then verify that it is part of this module.
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("

<ion-content padding>
  [ERROR ->]<idioma></idioma>
"): ng:///LoginPageModule/table.html@12:2
syntaxError@http://localhost:8100/build/vendor.js:82661:34
TemplateParser.prototype.parse@http://localhost:8100/build/vendor.js:93899:19
JitCompiler.prototype._compileTemplate@http://localhost:8100/build/vendor.js:108093:18
JitCompiler.prototype._compileComponents/<@http://localhost:8100/build/vendor.js:108012:56
JitCompiler.prototype._compileComponents@http://localhost:8100/build/vendor.js:108012:9
JitCompiler.prototype._compileModuleAndComponents/<@http://localhost:8100/build/vendor.js:107899:13
then@http://localhost:8100/build/vendor.js:82650:143
JitCompiler.prototype._compileModuleAndComponents@http://localhost:8100/build/vendor.js:107898:16
JitCompiler.prototype.compileModuleAsync@http://localhost:8100/build/vendor.js:107827:32
ModuleBoundCompiler.prototype.compileModuleAsync@http://localhost:8100/build/vendor.js:108227:16
loadAndCompile/<@http://localhost:8100/build/vendor.js:68163:16
M</l</t.prototype.invoke@http://localhost:8100/build/polyfills.js:3:14354
onInvoke@http://localhost:8100/build/vendor.js:4247:24
M</l</t.prototype.invoke@http://localhost:8100/build/polyfills.js:3:14281
M</c</r.prototype.run@http://localhost:8100/build/polyfills.js:3:9504
f/<@http://localhost:8100/build/polyfills.js:3:19620
M</l</t.prototype.invokeTask@http://localhost:8100/build/polyfills.js:3:15029
onInvokeTask@http://localhost:8100/build/vendor.js:4238:24
M</l</t.prototype.invokeTask@http://localhost:8100/build/polyfills.js:3:14942
M</c</r.prototype.runTask@http://localhost:8100/build/polyfills.js:3:10195
o@http://localhost:8100/build/polyfills.js:3:7267
M</h</e.invokeTask@http://localhost:8100/build/polyfills.js:3:16203
p@http://localhost:8100/build/polyfills.js:2:26991
v@http://localhost:8100/build/polyfills.js:2:27238

奇怪的是，如果我在我的主页上使用idioma组件它确实有效，但如果我在其他地方使用它没有，所以我想我可能会丢失一些导入或导出。

编辑：的 table.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

/**
 * Generated class for the TablePage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-table',
  templateUrl: 'table.html',
})
export class TablePage {

  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad MesaPage');
  }

}

table.module.ts

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { TablePage } from './table';

@NgModule({
  declarations: [
    TablePage,
  ],
  imports: [
    IonicPageModule.forChild(TablePage),
  ],
})
export class TablePageModule {}

Answer 1

当您从一个单独的ComponentsModule声明和导出您的IdiomaComponent时，您只需要在您打算使用它的模块中导入此模块，这里是TablePageModule。

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

Answer 2

你只需要这样做：

从IdiomaComponent删除所有与app.module.ts相关的内容。由于它有自己的模块（即components.module.ts），因此不需要它。

导入ComponentsModule之后，如下所示。

table.module.ts

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

@NgModule({
  declarations: [
    TablePage,
  ],
  imports: [
    IonicPageModule.forChild(TablePage),
    ComponentsModule //here
  ],
})
export class TablePageModule {}

在页面

2 个答案: