zoukankan      html  css  js  c++  java
  • [Schematics] 1. Copy and Manipulate Template

    1. Create a src/my-component/files/src/app directory to hold your templates.

    mkdir -p src/my-component/files/src/app

    2. Create an app.component.ts file in src/my-component/files/src/app and put the following code in it:

    import { Component } from '@angular/core';
    
    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
    })
    export class AppComponent {
      name = '<%= name %>';
    }

    The <%= name %> variable is an option you’ll pass in when running this Schematic. Create an app.component.html file with some HTML that reads the name variable.

    3.  Add template as well:

    <div style="text-align:center">
      <h1>
       Hello, {{ name }}
      </h1>
    </div>
    
    <router-outlet></router-outlet>

    4. Now what we want is let user to give the 'name' thought prompt, In order to define the name prompt, create a schema.json file in the src/my-component directory.

    {
      "$schema": "http://json-schema.org/schema",
      "id": "SchematicsMyComponent",
      "title": "My Component Schema",
      "type": "object",
      "properties": {
        "name": {
          "type": "string",
          "description": "Your Name",
          "x-prompt": "What is your name?"
        }
      },
      "required": ["name"]
    }

    Then update src/collection.json to reference this file in a schema property.

    {
      "$schema": "../node_modules/@angular-devkit/schematics/collection-schema.json",
      "schematics": {
        "my-component": {
          "description": "A blank schematic.",
          "factory": "./my-component/index#myComponent",
          "schema": "./my-component/schema.json"
        }
      }
    }

    5. Then update src/my-component/index.ts so you can get your generated project’s path, and copy templates.

    import {
      apply,
      MergeStrategy,
      mergeWith,
      move,
      Rule,
      SchematicContext,
      template,
      Tree,
      url,
      FileEnty,
      forEach
    } from '@angular-devkit/schematics';
    import { join, normalize } from 'path';
    import { getWorkspace } from '@schematics/angular/utility/config';
    
    export function setupOptions(host: Tree, options: any): Tree {
      const workspace = getWorkspace(host);
      if (!options.project) {
        options.project = Object.keys(workspace.projects)[0];
      }
      const project = workspace.projects[options.project];
    
      options.path = join(normalize(project.root), 'src');
      return host;
    }
    
    export function myComponent(_options: any): Rule {
      return (tree: Tree, _context: SchematicContext) => {
        setupOptions(tree, _options);
    
        const movePath = normalize(_options.path + '/');
        const templateSource = apply(url('./files/src'), [
          template({..._options}),
          move(movePath),
          // fix for https://github.com/angular/angular-cli/issues/11337
          forEach((fileEntry: FileEntry) => {
            if (tree.exists(fileEntry.path)) {
              tree.overwrite(fileEntry.path, fileEntry.content);
            }
            return fileEntry;
          }),
        ]);
        const rule = mergeWith(templateSource, MergeStrategy.Overwrite);
        return rule(tree, _context);
      };
    }

    We can use this as a template when we want to add some template into the schematics.

    6. Test with real application:

    ng new my-test-app --routing --style css
    cd my-test-app
    npm link ../my-component
    ng g my-component:my-component

    When I tried this, it prompted me:

    $ ng g my-component:my-component
    ? What is your name? Matt
    UPDATE src/app/app.component.html (109 bytes)
    UPDATE src/app/app.component.ts (207 bytes)

    7. Support for ng add with Angular CLI:

    A slick feature of Angular CLI is its ng add command. You can use it to invoke schematics and add features like PWA support and Angular Material to your projects. For example:

    ng add @angular/pwa
    ng add @angular/material

    You can support for ng add $your-schematic too! Open my-component/src/collection.json and add a new ng-add schematic.

    {
      "$schema": "../node_modules/@angular-devkit/schematics/collection-schema.json",
      "schematics": {
        "my-component": {
          "description": "A blank schematic.",
          "factory": "./my-component/index#myComponent",
          "schema": "./my-component/schema.json"
        },
        "ng-add": {
          "factory": "./ng-add/index",
          "description": "Add schematic",
          "schema": "./my-component/schema.json"
        }
      }
    }

    Create src/ng-add/index.ts and add the code necessary for it to invoke the my-component schematic.

    import { chain, Rule, schematic, SchematicContext, Tree, } from '@angular-devkit/schematics';
    
    export default function (options: any): Rule {
      return (host: Tree, context: SchematicContext) => {
        return chain([
          schematic('my-component', options)
        ])(host, context);
      };
    }

    After build, link to project, then you can run:

    ng add my-component

    Source

  • 相关阅读:
    Android Studio Tips -- 布局预览
    weibo sdk Multiple dex files define Lcom/sina/weibo/sdk/BuildConfig
    Android Studio下添加assets目录
    Android中bitmap图片透明度的处理(以撕美女衣服为例)
    Android中使用ViewPage进行广告轮播测试代码
    比赛现场打分管理平台概述
    排行榜每页默认为8行,如何把默认行数改成12行或其他行数?
    复习重点补充-
    字典读写训练
    Python爬网常见方法:find_all与re的结合使用
  • 原文地址:https://www.cnblogs.com/Answer1215/p/11739483.html
Copyright © 2011-2022 走看看