各位看官,若您在阅读一下内容的时候,若存在与此主题相关但未涉及的内容,请留言,将会及时对该内容进行维护,互相指点,提升学习,提高技能邮箱地址
新建项目
命令说明:
ionic start `project-name`
参数说明:
参数 | 说明 |
---|---|
ionic | ionic cli 工具 |
start | ionic 新建项目命令 |
@H_301_34@project-name | 自定义项目名称 |
示例代码:
ionic start helloworld
可选择对应的初始化项目模板
新建组件
ionic g component `component-name`
参数说明:
参数 | 说明 |
---|---|
ionic | ionic cli 工具 |
g | ionic 生成命令(generate) |
@H_301_34@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 | 组件样式 | @H_301_34@无需在@H_301_34@@Component中使用@H_301_34@styleUrls引用同级目录下的@H_301_34@*.scss文件,@H_301_34@引了会报错。 |
2 | 组件引入 | 引入方式有两种,全局引用,将@H_301_34@components.module.ts文件引入到@H_301_34@app目录下的@H_301_34@app.module.ts文件中的 @H_301_34@@NgModule下的 @H_301_34@imports中,局部引用,则在目标page中的@H_301_34@*.module.ts文件中的相同位置进行引用即可使用 |
2 | 第三方组件依赖 | 如果自定义组件中用到了外部(第三方)组件,则需要在对应的组件的.module.ts文件或者components.module.ts文件中的@NgModule下的inports中进行引用 |
特别注意: 请勿在自定义组件的@H_301_34@@Component装饰器中使用@H_301_34@styleUrls属性引入同级目录下的@H_301_34@*.scss文件,否则 @H_301_34@会报错,真的 @H_301_34@会报错,真的真的 @H_301_34@会报错,重要的事情说三遍。