Question

我使用离子启动生成了一个空白的应用程序那很好。

现在我添加了一个名为opty的新页面离子g页opty。

点击按钮，使用nav.html从home.html创建导航到opty.html。效果很好。

现在，我添加了一个组件：离子g组分opty-header

直到这里都很好。现在，如果将此包含在opty.html中

最终出现错误：

Unhandled Promise rejection: Template parse errors:
'opty-header' is not a known element:
1. If 'opty-header' is an Angular component, then verify that it is part of this module.
2. If 'opty-header' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("

<ion-content padding>
  [ERROR ->]<opty-header></opty-header>
</ion-content>
"): ng:///AppModule/OptyPage.html@16:2 ; Zone: <root> ; Task: Promise.then ; Value: Error: Template parse errors:
'opty-header'

我的opty.module.ts看起来像

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { OpportunitiesPage } from './opportunities';

import { ComponentsModule } from '../../components/components.module'


@NgModule({
  declarations: [
    OpportunitiesPage,
  ],
  imports: [
    IonicPageModule.forChild(OpportunitiesPage),
    ComponentsModule
  ],
})
export class OpportunitiesPageModule {}

我的components.module.ts看起来像

import { NgModule } from '@angular/core';
import { OptyHeaderComponent } from './opty-header/opty-header';
@NgModule({
    declarations: [OptyHeaderComponent],
    imports: [],
    exports: [OptyHeaderComponent]
})
export class ComponentsModule {}

由于opty.module.ts明确地导入OptyHeaderComponent以及声明，所以我无法理解如何解决它。

Answer 1

由于您在components.module.ts文件中声明并导出OptyHeaderComponent：

import { NgModule } from '@angular/core';
import { OptyHeaderComponent } from './opty-header/opty-header';

@NgModule({
    declarations: [OptyHeaderComponent],
    imports: [],
    exports: [OptyHeaderComponent]
})
export class ComponentsModule {}

现在在opty.module.ts文件中导入ComponentsModule，如下所示：

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { OptyPage } from './opty';

// import the ComponentsModule...

@NgModule({
  declarations: [
    OptyPage
  ],
  imports: [
    IonicPageModule.forChild(OptyPage),
    ComponentsModule // The ComponentsModule includes the OptyHeaderComponent
  ]
})
export class OptyPageModule { }

延迟加载功能在Ionic中仍在改进，但这是处理延迟加载的页面和组件的推荐方法。 所以你要创建一个包含所有组件的单个模块（ComponentsModule），然后只需在每个页面模块中导入该模块，使其在该页面中可用。

Answer 2

首先你的components.module需要在import上列出组件模块的类。

<强> components.module

import { NgModule } from '@angular/core';
import { OptyHeaderComponent } from './opty-header/opty-header';
@NgModule({
    imports: [OptyHeaderComponentModule]
})
export class ComponentsModule {}

您的opty模块需要导出标头组件，以便可以在其他组件中使用

<强> opty.module.ts

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { OptyPage } from './opty';

import { OptyHeaderComponent } from '../../components/opty-header/opty-header'
@NgModule({
  declarations: [
    OptyPage,
    OptyHeaderComponent
  ],
  imports: [
    IonicPageModule.forChild(OptyPage)
  ],
  exports: [
    OptyHeaderComponent
  ]
})

ionic 3 angular Unhandled Promise rejection：模板解析错误：

2 个答案: