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

Question

我在我的项目中使用angular-cli,当我在下面运行命令时, ng g c componentName那么,

使用一些默认文本创建一个组件,如下面的@Component({})等

component.ts

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

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

export class component implements OnInit{

constructor(){}

 ngOnInit() {}
}

创建组件时,默认情况下如何创建此文本？

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

custom.component.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)); }
        }
    }
        }

custom.component.html

Welcome to component template.

Answer 1

我认为您正在寻找@schematics。我最近在 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:schematic --name myCustomBlueprint

此命令使用原理图本身创建一个新的 npm 包，您必须自定义该包才能创建您自己的原理图集合。执行命令，你会看到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 软件架构师

编辑：原理图正在积极开发并经常更改。有关它的最新信息可以在Angular 团队的这篇博客文章中找到。