先介绍第一种方式,使用命令时,加上一些选项配置:
选项配置 说明--export=true|false 生成的组件在对应的模块文件中,是否自动在 exports 列表中声明该组件好对外公开,默认值 false。
--flat=true|false 当为 true 时,生成的组件不自动创建 xxx 的文件夹,直接在当前目录下创建那几份文件,默认值 false。
--spec=true|false 当为 false 时,不自动创建 .spec.ts 文件,默认值为 true。
--skipTests=true|false 当为 true 时,不自动创建 .spec.ts 文件,默认值 false。该选项配置是新版才有,旧版就使用 --spec 配置。
--styleext=css|scss|sass|less|styl 设置组件是否使用预处理器,旧版接口
--style=css|scss|sass|less|styl 设置组件是否使用预处理器,新版接口
--entryComponent=true|false 当为 true 时,生成的组件自动在其对应的模块内的 entryComponents 列表中声明,默认 false。
--inlineStyle=true|false 当为 true 时,组件使用内联的 style,不创建对应的 css 文件,默认 false。
--inlineTemplate=true|false 当为 true 时,组件使用内联的模板,不创建对应的 html 文件,默认 false。
--lintFix=true|false 当为 true 时,组件创建后,自己进行 lintFix 操作,默认 false。
--module=module 指定组件归属的模块,默认当前目录所属的模块。
--prefix=prefix 指定组件 selector 取值的前缀,默认 app。
--project=project 指定组件归属的 project。
--selector=selector 指定组件的 selector 名。
--skipImport=true|false 当为 true,生成的组件不在对应的模块中声明任何信息,默认 false。
--changeDetection=Default|OnPush 设置改变组件的检测策略,默认 Default。
以上,是使用 ng g component 命令时,可以携带的一些选项配置,来修改默认的行为,其中,如果选项配置为 true,那么 value 值可以省略,如 --flat=true 可以简写成 --flat。
比如:ng g component xxx --flat --inlineStyle --inlineTemplate --spec=false --export
另外,其实这些选项配置中,除了前面几项可能比较常用外,其他的我基本都还没怎么接触过。
下面,讲讲第二种方式,修改 angular.json 配置文件来修改默认行为:
也就是在 projects 里选择当前项目,然后再其 schematics 下进行配置,至于 @schematics/angular:component 这串怎么来的,可以去开头第一行所指的那份 schema.json 文件中查找。
其实,这份 schema.json 文件,就是 Angular-CLI 的默认配置,当忘记都有哪些命令或参数,除了可以借助 help 命令或到官网查阅外,也可以到这份文件中查阅。
除了组件外,也还有指令、模块等命令的默认配置,可以看下其中一项默认配置:
{ "@schematics/angular:component": { "type": "object", "properties": { "changeDetection": { "description": "Specifies the change detection strategy.", "enum": [ "Default", "OnPush" ], "type": "string", "default": "Default", "alias": "c" }, "entryComponent": { "type": "boolean", "default": false, "description": "Specifies if the component is an entry component of declaring module." }, "export": { "type": "boolean", "default": false, "description": "Specifies if declaring module exports the component." }, "flat": { "type": "boolean", "description": "Flag to indicate if a directory is created.", "default": false }, "inlineStyle": { "description": "Specifies if the style will be in the ts file.", "type": "boolean", "default": false, "alias": "s" }, "inlineTemplate": { "description": "Specifies if the template will be in the ts file.", "type": "boolean", "default": false, "alias": "t" }, "module": { "type": "string", "description": "Allows specification of the declaring module.", "alias": "m" }, "prefix": { "type": "string", "format": "html-selector", "description": "The prefix to apply to generated selectors.", "alias": "p" }, "selector": { "type": "string", "format": "html-selector", "description": "The selector to use for the component." }, "skipImport": { "type": "boolean", "description": "Flag to skip the module import.", "default": false }, "spec": { "type": "boolean", "description": "Specifies if a spec file is generated.", "default": true }, "styleext": { "description": "The file extension to be used for style files.", "type": "string", "default": "css" }, "viewEncapsulation": { "description": "Specifies the view encapsulation strategy.", "enum": [ "Emulated", "Native", "None", "ShadowDom" ], "type": "string", "alias": "v" } } } }