ionic v3 中的自定义组件

2024-01-07

我想创建一个简单的组件并将其包含在页面上。我用它创建了ionic g component my-header(ionic-cli v3 beta),修复了IonicPageModule bug,然后添加到另一个页面。然后我得到这个错误:

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 声明中。

感谢您的帮助。

EDIT:

该组件位于我的内部components folder:

组件/my-header/my-header.html

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

组件/my-header/my-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 {}

组件/my-header/my-header.scss

my-header {}

组件/my-header/my-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';
  }

}

应用程序/应用程序模块.ts

/* imports */
import { MyHeaderComponent } from '../components/my-header/my-header';

@NgModule({
  declarations: [
    MyApp,
    MyHeaderComponent
  ],
...

页面/home/home.html


由于 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 文件中删除导入和声明,该文件是在创建自定义组件时自动添加的。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

ionic v3 中的自定义组件 的相关文章

随机推荐

  • Inno安装程序文件复制失败

    我正在开发一个安装程序 需要在安装之前创建目录的备份 我实现的方法纯粹是将所有文件从当前目录复制到新目录 然后我可以随意覆盖旧目录中的文件 我的安装程序 但是 我收到一条提示file copy failed 但我就是不明白为什么它不起作用
  • 如何更改 Web UI 中的工作/阶段描述?

    当我在 Apache Spark 上运行作业时 Web UI 会显示与此类似的视图 虽然这对于我作为开发人员查看事物的位置非常有用 但我认为阶段描述中的行号对于我的支持团队来说不太有用 为了使他们的工作更轻松 我希望能够为我工作的每个阶段以
  • C 语言中最快的抖动/半色调库

    我正在开发一个自定义瘦客户端服务器 为其客户端提供渲染的网页 服务器运行在多核 Linux 机器上 Webkit 提供 html 渲染引擎 唯一的问题是客户端显示仅限于 4 位 16 色 灰度调色板 我目前正在使用 LibGraphicsM
  • 在运行时为弹出视图锚点创建按钮

    这可能是不可能的 但我希望有人知道如何做到这一点 我有一个应用程序仅从 iPhone 移植到 Universal 在 iPhone 上 我使用的是选项卡式应用程序 我使用三个选项卡来显示正常数据 我有第四个选项卡 仅在满足某些条件时才显示
  • MySQL什么时候更新索引

    更新 插入后索引到底什么时候更新 是在更新 插入查询返回之前 是在查询返回之后的某个时间 还是在执行使用索引的查询时 索引更新有两个方面 第一部分是在索引中插入 更新 删除条目 一旦记录发生更改 索引就会更新 并且此过程会阻塞查询直到完成
  • 如何避免 Jupyter cell-id 始终发生变化,从而避免 VCS 差异?

    正如中所讨论的q 66678305 https stackoverflow com questions 66678305 where does the id field eg wound transition in a jupyter no
  • Travis-CI Node.js 默认使用 Ruby 构建?未找到 RakeFile

    我将其发布作为对其他遇到相同问题的人的参考 rake rake aborted No Rakefile found looking for rakefile Rakefile rakefile rb Rakefile rb home tra
  • Cube.js 时间范围最佳实践

    我有一个表格 其中包含日期范围内的商品价格 在cube js 中对此进行建模以允许时间维度查询 例如随时间变化的价格或商品的平均价格 的最佳方法是什么 Thanks 该表看起来像 CREATE pricing test timestamp
  • 添加不同类的 div 时,css last-child 不起作用

    我有一些看起来像这样的 HTML div class SomeContainer div class MyClass div div class MyClass div div class MyClass div div class MyO
  • 在宏中生成包含文件名

    我正在尝试在宏中生成包含文件名 这在 C 中应该是合法的 define INCLUDE FILE module impl win hpp include INCLUDE FILE 这工作正常 但是一旦我尝试生成文件名 它就无法编译 defi
  • 使用 Numpy (np.linalg.svd) 进行奇异值分解

    我正在阅读 Abdi Williams 2010 主成分分析 并且我正在尝试重做 SVD 以获得进一步 PCA 的值 文章指出以下 SVD X P D Q t 我将数据加载到 np array X 中 X np array data P D
  • 在 Websphere 上使用 Jasper-Reports 时出现“错误的主要版本”错误

    当我尝试在 Websphere 6 1 上运行的 Servlet 中填充 JasperReport 时 我得到一个UnsupportedClassVersionError Bad major version at offset 6 我猜想编
  • 从捆绑属性获取属性映射时形成对 void 的引用

    My Graph类型定义如下 using Graph boost adjacency list
  • 在内部类中定义按钮操作 Vs 在 swing 的公共类中定义按钮操作

    我有一个对话框 其中有四个按钮 新建 保存 删除 取消 现在每个人都需要执行他们的行动 所以我定义了一个单独的类来实现ActionListener 我已经使用这个类来执行每个按钮操作 public class MyClass impleme
  • 如何将自定义样式应用于 NSTableHeaderView?

    所以我想要一个自定义的 NSTableView 我已经成功子类化了NSTableRowView and NSTextFieldCell为了实现我想要的外观 但是我正在努力摆脱标题的默认样式 我似乎能够调整它的框架 但是我不确定其余的默认样式
  • 为什么我收到无效的 csrf 令牌?

    我有一个带有 spring cloud security 的项目 它是一个用于 oauth 授权的 auth 服务器 过去效果很好 我通过配置添加了用于 ssl 支持的 spring 配置文件 security require ssl tr
  • 如何显示堆栈溢出站点中的更新消息

    我想知道这个堆栈溢出站点中的更新消息是如何实现的 更准确地说 例如 当我尝试回复问题并且正在输入回复时 我会在页面顶部看到一条消息 说明已添加新答案 这个功能是如何实现的 AFAIK 可能的方式可以是HTML5 websocket或serv
  • 弹性搜索正则表达式从右侧获取最后 7 位数字

    我有以此格式索引的数据 676767 2343423 2344444 32494444 我需要一个正则表达式来模式分析器从右边开始的最后 7 位数字 Ex 输出 2494444 我们尝试过的模式 0 9 7 不起作用 在 ElasticSe
  • UnicodeDecodeError:“ascii”编解码器无法解码位置 0 中的字节 0xe0:序数不在范围内(128)

    在我的一台机器上 当我使用 google apps engine 或 django 时 出现错误 例如 app yaml application demas1252c version 1 runtime python api version
  • ionic v3 中的自定义组件

    我想创建一个简单的组件并将其包含在页面上 我用它创建了ionic g component my header ionic cli v3 beta 修复了IonicPageModule bug 然后添加到另一个页面 然后我得到这个错误 Err