我正在尝试将 Angular 的默认组件模板扩展为可用于我们团队的自定义模板。我已经阅读/遵循了一些教程，但似乎没有一个能做我想要完成的事情。无论如何，我认为我已经到了一个应该大部分工作的地方，但是我遇到了“viewEncapsulation 未定义”错误，这有点模糊。我已将其范围缩小到从模板中的@schemics/angular 复制的代码：
import { Component, OnInit<% if(!!viewEncapsulation) { %>, ViewEncapsulation<% }%><% if(changeDetection !== 'Default') { %>, ChangeDetectionStrategy<% }%> } from '@angular/core';
// ^^^ HERE ^^^
@Component({
selector: '<%= selector %>',<% if(inlineTemplate) { %>
template: `
<p>
<%= dasherize(name) %> works!
</p>
`,<% } else { %>
templateUrl: './<%= dasherize(name) %>.component.html',<% } if(inlineStyle) { %>
styles: []<% } else { %>
styleUrls: ['./<%= dasherize(name) %>.component.<%= styleext %>']<% } %><% if(!!viewEncapsulation) { %>,
encapsulation: ViewEncapsulation.<%= viewEncapsulation %><% } if (changeDetection !== 'Default') { %>,
changeDetection: ChangeDetectionStrategy.<%= changeDetection %><% } %>
})
export class <%= classify(name) %>Component implements OnInit {
constructor() { }
ngOnInit() {
}
}
当我在 @schemics/angular 中挖掘代码时，我认为问题可能来自我的 schema.json，但更新似乎没有效果。然后我认为它可能是生成的schema.js，但运行npm run build似乎并没有生成与我正在建模的代码相匹配的代码。
如何让我的 schema.js 更新？如果这不是问题，那么如何修复 viewEncapsulation 错误？
-- 文件 --
模式.json
{
"$schema": "http://json-schema.org/schema",
"id": "CricutSchematicsComponent",
"title": "Cricut Design Space Component",
"type": "object",
"properties": {
"path": {
"type": "string",
"format": "path",
"description": "The path to create the component.",
"visible": false
},
"project": {
"type": "string",
"description": "The name of the project.",
"$default": {
"$source": "projectName"
}
},
"name": {
"type": "string",
"description": "The name of the component.",
"$default": {
"$source": "argv",
"index": 0
},
"x-prompt": "What name would you like to use for the component?"
},
"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"
},
"viewEncapsulation": {
"description": "Specifies the view encapsulation strategy.",
"enum": ["Emulated", "Native", "None", "ShadowDom"],
"type": "string",
"alias": "v"
},
"changeDetection": {
"description": "Specifies the change detection strategy.",
"enum": ["Default", "OnPush"],
"type": "string",
"default": "Default",
"alias": "c"
},
"prefix": {
"type": "string",
"description": "The prefix to apply to generated selectors.",
"alias": "p",
"oneOf": [
{
"maxLength": 0
},
{
"minLength": 1,
"format": "html-selector"
}
]
},
"styleext": {
"description": "The file extension to be used for style files.",
"type": "string",
"default": "css"
},
"spec": {
"type": "boolean",
"description": "Specifies if a spec file is generated.",
"default": true
},
"flat": {
"type": "boolean",
"description": "Flag to indicate if a directory is created.",
"default": false
},
"skipImport": {
"type": "boolean",
"description": "Flag to skip the module import.",
"default": false
},
"selector": {
"type": "string",
"format": "html-selector",
"description": "The selector to use for the component."
},
"module": {
"type": "string",
"description": "Allows specification of the declaring module.",
"alias": "m"
},
"export": {
"type": "boolean",
"default": false,
"description": "Specifies if declaring module exports the component."
},
"entryComponent": {
"type": "boolean",
"default": false,
"description": "Specifies if the component is an entry component of declaring module."
},
"lintFix": {
"type": "boolean",
"default": false,
"description": "Specifies whether to apply lint fixes after generating the component."
}
},
"required": ["name"]
}
架构.ts
export interface Schema {
/**
* Specifies the change detection strategy.
*/
changeDetection?: ChangeDetection;
/**
* Specifies if the component is an entry component of declaring module.
*/
entryComponent?: boolean;
/**
* Specifies if declaring module exports the component.
*/
export?: boolean;
/**
* Flag to indicate if a directory is created.
*/
flat?: boolean;
/**
* Specifies if the style will be in the ts file.
*/
inlineStyle?: boolean;
/**
* Specifies if the template will be in the ts file.
*/
inlineTemplate?: boolean;
/**
* Specifies whether to apply lint fixes after generating the component.
*/
lintFix?: boolean;
/**
* Allows specification of the declaring module.
*/
module?: string;
/**
* The name of the component.
*/
name: string;
/**
* The path to create the component.
*/
path?: string;
/**
* The prefix to apply to generated selectors.
*/
prefix?: string;
/**
* The name of the project.
*/
project?: string;
/**
* The selector to use for the component.
*/
selector?: string;
/**
* Flag to skip the module import.
*/
skipImport?: boolean;
/**
* Specifies if a spec file is generated.
*/
spec?: boolean;
/**
* The file extension to be used for style files.
*/
styleext?: string;
/**
* Specifies the view encapsulation strategy.
*/
viewEncapsulation?: ViewEncapsulation;
}
/**
* Specifies the change detection strategy.
*/
export declare enum ChangeDetection {
Default = "Default",
OnPush = "OnPush"
}
/**
* Specifies the view encapsulation strategy.
*/
export declare enum ViewEncapsulation {
Emulated = "Emulated",
Native = "Native",
None = "None",
ShadowDOM = "ShadowDom"
}
索引.ts
import {
Rule,
// Tree,
apply,
url,
applyTemplates,
move,
chain,
mergeWith,
externalSchematic
} from '@angular-devkit/schematics';
import { strings, normalize /*experimental*/ } from '@angular-devkit/core';
import { Schema as ComponentSchema } from './schema';
export function component(options: ComponentSchema): Rule {
return chain([
externalSchematic('@schematics/angular', 'component', options),
// (tree: Tree) => {
() => {
const templateSource = apply(url('./files'), [
applyTemplates({
classify: strings.classify,
dasherize: strings.dasherize,
name: options.name
}),
move(normalize(options.path as string))
]);
return chain([mergeWith(templateSource)]);
}
]);
}