ionic-cli或angular-cli能很好地辅助开发,其中generate很方便地创建各种模版内容,即:
ionic generate/ng generate或简写为ionic g/ng g
比如我们创建一个组件,执行:
代码语言:javascript复制ng g c test1
或
ionic g c test1
就会创建4个文件:
代码语言:javascript复制> ng generate component test1
CREATE src/app/test1/test1.component.scss (0 bytes)
CREATE src/app/test1/test1.component.html (24 bytes)
CREATE src/app/test1/test1.component.spec.ts (719 bytes)
CREATE src/app/test1/test1.component.ts (260 bytes)
test1.component.ts打开会是这样:
代码语言:javascript复制 selector: 'app-test1',
其中“app”就是默认加的前缀,很多时候新人会忽略到这个前缀,以<test1>的标签来调用,往往就会找不到组件并报错。
替换这个前缀,可以在执行命令时加上参数选项:
--prefix=prefix:指定组件 selector 取值的前缀,默认 app。
即敲:
代码语言:javascript复制ng g c test1 --prefix wood
#前缀至空
ng g c test1 --prefix
但每次打稍显麻烦,也容易打错,其实可以在angular.json直接配置,如:
代码语言:javascript复制"schematics": {
"@ionic/angular-toolkit:component": {
"styleext": "scss",
"spec": false,
"prefix": ""
},
"@schematics/angular:component": {
"styleext": "scss",
"spec": false,
"prefix": ""
}
}
注意:第一个是配置ionic-cli,第二个是配置angular-cli。额外的,spec也设置来取消创建spec.ts测试文件,因为平常不太用到。