angular - 如何创建自定义命令(在终端上运行)以在 angular2 中创建所需的组件(包含所需的内容)？

Question

我在我的项目中使用 angular-cli，当我运行下面的命令时，比如 - ng g c componentName 然后，

组件是用一些默认文本创建的，如下所示- @Component({}) 等

组件.ts

import { Component } from '@angular/core';

@Component({
  selector: '',        
  templateUrl: '',
  styleUrls: ['']
})

export class component implements OnInit{

constructor(){}

 ngOnInit() {}
}

创建组件时默认如何创建此文本？

我们能否使用 component.ts 和 component.html 中的默认文本创建自己的组件生成自定义命令(如下所示)？

自定义组件.ts

       import { Component } from '@angular/core';

        @Component({
          selector: '',         <-----name as provide in command
          templateUrl: '',
          styleUrls: ['']
        })

        export class component implements OnInit{

        constructor(){}
        title = 'Welcome to component ';
         size: 500;
         width: 1000;
         height:500;
    '
    '
    '
         ngOnInit() {
   if (this.data) {
          this.buildChart(this.data);
        }
        // For Default Data from json
        else {
          try {
            let self = this;
            this.jsonDataService.getChartDefaultData().subscribe(
              function (success) {
                self.data = success;
                self.buildChart(success);
              },
              error => console.log('Getting Server Data Error :: ' + JSON.stringify(error)));
          } catch (e) { console.error('Error :: ' + JSON.stringify(e)); }
        }
    }
        }

自定义组件.html

Welcome to component template.

Answer 1

我认为您正在寻找@schematics。我看到一个show on ngAir最近关于这个。在 ng new 命令上有一个选项 --collection，您可以使用它来指定您自己的自定义模板集合以与 CLI 一起使用。它是在 CLI 版本 1.4.2 中引入的。要创建您自己的原理图集合，您首先必须安装一些 npm 包。 (截至今天的最新版本)

npm i -g @angular-devkit/core@0.0.22
npm i -g @angular-devkit/schematics@0.0.40
npm i -g @schematics/schematics@0.0.10
npm i -g rxjs

然后你就可以像这样使用'schematics'命令了。

schematics @schematics/schematics:schematic --name myCustomBlueprint

此命令使用 schematics 本身来创建一个新的 npm 包，您必须对其进行自定义以创建您自己的 schematics 集合。执行命令，你会看到npm包在src目录下有几个原理图。标记为 my-full-schematic 的有一个示例，说明如何在模板中使用参数。在 my-full-schema 目录的 schema.json 文件中，您将看到一个带有子索引和名称的属性元素。像这样

"properties": {
  "index": {
    "type": "number",
    "default": 1
  },
  "name": {
    "type": "string"
  }
},

索引和名称是演示原理图的 ng new 命令的参数。它们用于 test_INDEX_ 和 test2 模板。

老实说，这是一个相对未记录的功能。我还没有完全弄明白，但我希望这足以让你开始。

另外，这里有几篇文章深入解释了如何自定义原理图集。 angularInDepth softwarearchitect

编辑:Schematics 正在积极开发和频繁更改。关于它的最新信息可以在this blog post中找到。来自 Angular 团队。