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文件,不然 會報錯, 真的 會報錯, 真的真的 會報錯,重要的事情說三遍。