ngカスタムファイル、コンポーネントをcliで生成する

従来のコピーテープと比べて、モジュール、コンポーネントを作成するためにアングラーcliの足場機能を使用すると非常に効率的です.ファイルを作成するだけでなく、必要なコードも含まれています.また、最近のモジュールを導入しました.いくつかの重複作業はcliを使って節約できます.アングラーは豊富なファイルタイプを提供していますが、いずれにしても自分達のプロジェクトの必要性があります.ユーザー定義の拡張子のコンポーネントを作る必要があります.この時はcliを捨てなければなりません.カスタマイズした方式を使って足場を作ってもいいですか?
1.アングラー足場の作成方式
angglar文書を見ると、この言葉が見られます.Schematicという意味です.Schematicは足場ライブラリであり、プログラム項目を作成、修正、再構成、または移動ファイルおよびコードによって生成または変換する方法を定義する.Anglar Cliは、原理図を用いてプロジェクトファイルを生成し、修正する.ライブラリ開発者は、Cliがリリースされたライブラリを生成できるように原理図を作成することができる.表示できますhttps://www.npmjs.com/package/@angglar-devkit/schematicas.
それなら、angglarがSchematicを借りてプロジェクトファイルを生成していることが分かります.また、node_moduleの中に@Schematics/angularがあります.私たちがcliを使って生成できるすべてのファイルを定義しています.components\class\enum\interfaceなどがあります.componentsをチェックしてください.中にはtsファイルがあります.filesフォルダがあります.中には私たちがcomponentを生成するすべてのファイルが含まれています.

__name@dasherize@if-flat__

__name@dasherize__.component.__styleext__

__name@dasherize__.component.html

__name@dasherize__.component.spec.ts

__name@dasherize__.component.ts

考えてみます.Cliを実行してコンポーネントを作る時に、ここのテンプレートを使って、fileフォルダの中のファイルでプロジェクトのコンポーネントを作ります.他のはともかく、私たちはここのcomponentsによって自分たちの「原理図」を作ってもいいですか?
2.カスタム原理図
まず私達の需要を見てください.私達は今プロジェクトの中で、ページはpageです.angglarのもとの書き方によって、すべてのpageのコンポーネントは全部XXXX.component.tsです.私たちはページとコンポーネントを区別するために、ページのファイルは全部XXX.page.tsです.まずnode_module/@Schematics/angula/の下でcomponentをコピーしてpageを新たに作ってみます.
次に、pageの下のfilesフォルダのファイル名.componentを.pageに変更します.

page

files

.spec.ts

__name@dasherize@if-flat__

__name@dasherize__.page.__styleext__

__name@dasherize__.page.html

index.d.ts

index.jsコマンドが実行されると、このjsファイル

が実行されます.

schema.d.ts

schema.jsonは、このジェネレータコマンドが許容できるパラメータ

を定義している.
次にpageの中の__name@dasherize__.page.tsを見ます.このjsファイルは私達が自分の命令を実行する時に実行します.このファイルを見てください.中のコードはちょっと分かりませんが、当ててもいいです.鍵があります.

1
2
3
4
5

const componentPath = `/${options.path}/`
            + (options.flat ? '' : core_1.strings.dasherize(options.name) + '/')
            + core_1.strings.dasherize(options.name)
            + '.component';
const classifiedName = core_1.strings.classify(`${options.name}Component`);

 
このようなところでは、対応するコンポーネントファイルと内部のコンポーネントクラスを作成することを発見しました.したがって、index.jsと.componentのすべての場所を}Componentと.pageに置き換えます.

1
2
3
4
5

const componentPath = `/${options.path}/`
            + (options.flat ? '' : core_1.strings.dasherize(options.name) + '/')
            + core_1.strings.dasherize(options.name)
            + '.page';
const classifiedName = core_1.strings.classify(`${options.name}Page`);

 
次に}Pageを見ます.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

import { Component, OnInit, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core';
@Component({
  selector: '',
  template: `
    

       works!
    
  `,
  templateUrl: './.component.html',
  styles: []
  styleUrls: ['./.component.'],
  encapsulation: ViewEncapsulation.,
  changeDetection: ChangeDetectionStrategy.
})
export class Component implements OnInit {
  constructor() { }
  ngOnInit() {
  }
}

 
これは生成されたコンポーネントのtsテンプレートです.まずファイルの中のクラスです.今のファイル名はpage/files/__name@dasherize__.page.tsですから、中のクラスもXXX.page.ts形式が必要です.そして、私たちのページは命令として現れてはいけないので、XXXPageメタデータを削除します.総合して、私たちのselectorは次のように修正すべきです.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

import { Component, OnInit, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core';
@Component({
  templateUrl: './.page.html',
  
  styles: []
  styleUrls: ['./.page.'],
  encapsulation: ViewEncapsulation.,
  changeDetection: ChangeDetectionStrategy.
})
export class Page implements OnInit {
  constructor() { }
  ngOnInit() {
  }
}

 
OKです.これまで私たちの「原理図」はほぼ作成されました.私たちは今cliコマンドに参加します.__name@dasherize__.page.tsにおいてcliの命令が定義されています.同様に、まずcompnetの命令を観察します.

1
2
3
4
5
6

"component": {
    "aliases": [ "c" ], //     
    "factory": "./component", //      
    "description": "Create an Angular component.",
    "schema": "./component/schema.json"
},

 
私たちは私たち自身の命令を作成します.

1
2
3
4
5
6

"component": {
    "aliases": [ "pa" ], //     
    "factory": "./page", //      
    "description": "Create an Angular component page.",
    "schema": "./page/schema.json"
},

 
3.試験コマンド
これまで、私たちは自分たちの生成コマンドを追加しました.これからは、@Schematics/angular/collection.jsonの下にコンポーネントapp/pages/userを生成するように試みます.コマンド:user-test、結果を参照してください.
More than one module matches.Use skyp-mport option to skyp impoting the component into the closest module.
二つの解決方法:1.   ng g page pages/user/user-test                         2.ng＿page pages/user/login--module=ap.moduleは自分のmoduleがpageの中にあるからです.
ですから、私の命令はng＿page pages/user/login--module=./pages/main/main.moduleで、結果を確認します.

1
2
3
4

CREATE src/app/pages/user/user-test/user-test.page.css (0 bytes)
CREATE src/app/pages/user/user-test/user-test.page.html (28 bytes)
CREATE src/app/pages/user/user-test/user-test.page.ts (239 bytes)
UPDATE src/app/pages/user/user.module.ts (1803 bytes)

 
生成したtsファイルを見てください.

1
2
3
4
5
6
7
8
9
10

import { Component, OnInit } from '@angular/core';
@Component({
  templateUrl: './user-test.page.html',
  styleUrls: ['./user-test.page.css']
})
export class UserTestPage implements OnInit {
  constructor() { }
  ngOnInit() {
  }
}

 
とてもいいです.私たちの需要を満たします.
すみません、プロジェクトではlessを使っています.しかもng g page pages/user/user-test --skip-testを使って作成したコンポーネントの中のスタイルファイルは全部lessです.なぜ私達がカスタマイズしたのはcssファイルですか?
私達のカスタムのlessを識別していないかもしれませんが、カスタムのlessはどうやって決めますか?componentファイルの中にangular.jsonがあります.

1
2
3
4
5

"schematics": {
    "@schematics/angular:component": {
        "styleext": "less"
    }
},

 
つまり、私たちはここでprojectコンポーネントを生成するとき、componentはstyleextです.私たちのlessコマンドは配置されていないので、デフォルトのスタイルファイルのサフィックスを探します.ここで試してみます.

1
2
3
4
5
6
7
8

"schematics": {
    "@schematics/angular:component": {
        "styleext": "less"
    },
    "@schematics/angular:page": {
        "styleext": "less"
    }
},

 
もう一度生成します

1
2
3
4

CREATE src/app/pages/user/user-test/user-test.page.less (0 bytes)
CREATE src/app/pages/user/user-test/user-test.page.html (28 bytes)
CREATE src/app/pages/user/user-test/user-test.page.ts (240 bytes)
UPDATE src/app/pages/user/user.module.ts (1804 bytes)