脚本宝典收集整理的这篇文章主要介绍了Ionic创建Component,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
各位看官,若您在阅读一下内容的时候,若存在与此主题相关但未涉及的内容,请留言,将会及时对该内容进行维护, 互相指点,提升学习,提高技能邮箱地址
新建项目
命令说明:
ionic start `PRoject-name`
参数说明:
参数
说明
ionic
ionic cli 工具
start
ionic 新建项目命令
project-name
自定义项目名称
示例代码:
ionic start helloworld
可选择对应的初始化项目模板
新建组件
ionic g component `component-name`
参数说明:
参数
说明
ionic
ionic cli 工具
g
ionic 生成命令(generate)
component-name
自定组件名称
示例代码:
ionic g component x-header
生成文件:
-. components
-. x-header
-. x-header.htML
-. x-header.scss
-. x-header.ts
-. components.module.ts
文件内容:
components.module.ts
import { NgModule } From '@Angular/core';
import { CHeaderComponent } from './c-header/c-header';
import { CArticleComponent } from './c-article/c-article';
@NgModule({
declarations: [
CHeaderComponent,
],
imports: [],
exports: [
CHeaderComponent,
]
})
export class ComponentsModule {}
x-header.html
<div class="c-header">
{{text}}
</div>
x-header.scss
c-header {
}
x-header.ts
import { Component } from '@angular/core';
/**
* Generated class for the CHeaderComponent component.
*
* See https://angular.io/api/core/Component for more info on Angular
* Components.
*/
@Component({
selector: 'c-header',
templateUrl: 'c-header.html'
})
export class CHeaderComponent {
text: string;
constructor() {
console.LOG('Hello CHeaderComponent Component');
this.text = 'Hello World';
}
}
特别注意:
序号
注意事项
说明内容
1
组件样式
无需
在@Component
中使用styleUrls
引用同级目录下的*.scss
文件,引了会报错
。
2
组件引入
引入方式有两种, 全局引用, 将components.module.ts
文件引入到app
目录下的app.module.ts
文件中的 @NgModule
下的 imports
中, 局部引用, 则在目标page中的*.module.ts
文件中的相同位置进行引用即可使用
2
第三方组件依赖
如果自定义组件中用到了外部(第三方)组件,则需要在对应的组件的.module.ts文件或者components.module.ts文件中的@NgModule下的inports中进行引用
特别注意: 请勿在自定义组件的@Component
装饰器中使用styleUrls
属性引入同级目录下的*.scss
文件,否则 会报错
, 真的 会报错
, 真的真的 会报错
,重要的事情说三遍。
以上是脚本宝典为你收集整理的Ionic创建Component全部内容,希望文章能够帮你解决Ionic创建Component所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。