如何使用 Ionic 3 和 Angular 4 创建可重用组件

Posted

技术标签:

【中文标题】如何使用 Ionic 3 和 Angular 4 创建可重用组件【英文标题】:How to create a reusable component with Ionic 3 and Angular 4 【发布时间】:2018-05-03 04:31:04 【问题描述】:

我想为我的应用创建一个可重用的标头。所以,我做到了:

创建组件(app-header):

app-header.ts:

import  Component  from '@angular/core';

@Component(
  selector: 'app-header',
  templateUrl: 'app-header.html'
)
export class AppHeaderComponent 

  text: string;

  constructor() 
    console.log('Hello AppHeaderComponent Component');
    this.text = 'Hello World';
  


具有 HTML 的:

app-header.html:

<div>
  text
</div>

我已经在@NgModule 中添加了AppHeaderComponentdeclarations

...

import  AppHeaderComponent  from '../components/app-header/app-header';

@NgModule(
  declarations: [
    MyApp,
    TabsPage,
    AppHeaderComponent
  ],

...

我正在使用 TabsTemplate,我想在每个标签中添加这个组件,所以我在 feed.html(我的一个标签)上做了:

<app-header></app-header>

<ion-content>

...

但它给出了以下错误:

未捕获的错误:模板解析错误:'app-header' 不是已知的 元素: 1. 如果“app-header”是一个 Angular 组件,那么验证它是这个模块的一部分。 2. 如果 'app-header' 是一个 Web 组件,则将 'CUSTOM_ELEMENTS_SCHEMA' 添加到该组件的 '@NgModule.schemas' 压制此消息。 (" -->

[错误->]

所以,我将app-header.ts 更改为:

import  Component, NgModule, CUSTOM_ELEMENTS_SCHEMA  from '@angular/core';

@Component(
  selector: 'app-header',
  templateUrl: 'app-header.html'
)
@NgModule(
  schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
)
export class AppHeaderComponent 

  text: string;

  constructor() 
    console.log('Hello AppHeaderComponent Component');
    this.text = 'Hello World';
  


但同样的错误仍然存​​在。

我该怎么做?

更新

我正在使用标签,所以,我有:

tabs.ts:

import  Component  from '@angular/core';

import  FeedPage  from '../feed/feed';
import  AboutPage  from '../about/about';

@Component(
  templateUrl: 'tabs.html'
)
export class TabsPage 

  tabFeed = FeedPage;
  tabAbout= AboutPage;

  constructor() 

  

还有tabs.html:

<ion-tabs>
  <ion-tab [root]="tabFeed" tabIcon="paper"></ion-tab>
  <ion-tab [root]="tabAbout" tabIcon="search"></ion-tab>
</ion-tabs>

每个标签都会加载一个页面,例如feed.html(在问题中引用)

代码架构:

components.modules.ts 有:

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

【问题讨论】:

该错误表明组件未加载,因此 CUSTOM_ELEMENTS_SCHEMA 没有帮助。目前还不清楚它是在哪个 NgModule 模块中声明的,这很重要。考虑提供***.com/help/mcve。 @estus 但我指定了我试图将CUSTOM_ELEMENTS_SCHEMA 置于问题的位置......有什么疑问? 如果没有 MCVE,问题就跑题了。模块的层次结构是有问题的。此外,在您的代码中,在组件类上指定了带有 CUSTOM_ELEMENTS_SCHEMA 的 NgModule。当然,它不会以这种方式工作。即使您可以让它工作,主要问题是编译器无法识别该组件。通常你几乎不应该使用 CUSTOM_ELEMENTS_SCHEMA。这个错误不应该存在。 【参考方案1】:

您需要将其从app.module.ts 中删除,因为它已在ComponentsModule 中声明。

app.module.ts

@NgModule(
  declarations: [
    MyApp,
    TabsPage,
    //AppHeaderComponent <-- need to remove this
  ],

之后,你需要importComponentsModule如下图页面的module你需要的地方。

my.module.ts

@NgModule(
  declarations: [
    MyPage,
  ],
  imports: [
    IonicPageModule.forChild(MyPage),
    ComponentsModule <-- here you need
  ],
)
export class MyPageModule  

【讨论】:

有点晚了,但对我来说,使用 ionic 3,我不得不在 app.module 中导入 ComponentsModule,而不是在 myPage.module 本身中导入(在“imports”下) 这很糟糕。这意味着您将在应用程序初始化时导入所有组件。但是为了更好的性能,你必须在你需要使用它的页面的地方导入组件@oriuken 我明白你的意思,但我无法让它从页面模块导入。无论如何感谢您的信息【参考方案2】:

这就是ComponentsModule 的外观,否则您将无法使用像ion-gridion-row 等离子包装器。

components.module.ts

import NgModule from '@angular/core';
import CreatePostComponent from './create-post/create-post';
import IonicModule from "ionic-angular";

@NgModule(
    declarations: [
    CreatePostComponent,
  ],
    imports: [
    IonicModule, <== make sure to import IonicModule
  ],
    exports: [
    CreatePostComponent,
  ]
)
export class ComponentsModule 

然后在此之后,您希望将ComponentsModule 放入您想要使用它的任何其他组件的module.ts 文件的导入数组中。例如,在这里,我想在我的新闻提要页面(离子页面)中使用CreatePostComponent

newsfeed.module.ts

@NgModule(
  declarations: [
    NewsfeedPage,
  ],
  imports: [
    IonicPageModule.forChild(NewsfeedPage),
    ComponentsModule
  ],
)

瞧,然后您可以在newsfeed.html 中使用您的CreatePostComponent 选择器(在我的情况下为create-post)。

<create-post></create-post>

【讨论】:

以上是关于如何使用 Ionic 3 和 Angular 4 创建可重用组件的主要内容,如果未能解决你的问题,请参考以下文章

Angular 4 Web 应用程序到 Ionic 3 应用程序

Angular 4 / Ionic 3 - 使用量角器创建模拟服务

Ionic 4 迁移:Ionic 3 生命周期事件/导航守卫的 Angular 等价物是啥?

如何在IONIC 4中设置rootPage

离子切换按钮不显示正确的切换 - Ionic 3,Angular 4

无法将组件加载到页面中 - Angular 4/Ionic 3