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文件,否则 会报错, 真的 会报错, 真的真的 会报错,重要的事情说三遍。