各位看官,若您在阅读一下内容的时候,若存在与此主题相关但未涉及的内容,请留言,将会及时对该内容进行维护,互相指点,提升学习,提高技能邮箱地址
新建项目
命令说明:
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 @H_404_104@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 @H_404_104@<div class="c-header"> {{text}} </div>x-header.scss @H_404_104@c-header { }x-header.ts @H_404_104@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中进行引用 特别注意: 请勿在自定义组件的
原文链接:https://www.f2er.com/angularjs/144591.html@Component
装饰器中使用styleUrls
属性引入同级目录下的*.scss
文件,否则会报错
,真的会报错
,真的真的会报错
,重要的事情说三遍。