Ionic-cli/Angular-cil修改创建的“app”前缀

2019-07-15 10:55:13 浏览数 (1)

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测试文件,因为平常不太用到。

0 人点赞