如何使用 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
中添加了AppHeaderComponent
到declarations
:
...
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
],
之后,你需要import
ComponentsModule
如下图页面的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-grid
、ion-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 等价物是啥?