Question

我运行了一个简单的原理图，证明了原理图的工作方式如https://angular.io/guide/schematics-for-libraries

中所述。

下一步是使用原理图对项目做些相关的事情-我想要的是向我的应用程序中的所有HTML角度模板添加指令

例如，如果某个HTML文件的内容是这样的

<input name="input" [(ngModel)]="input" />

运行原理图后（添加指令）

<input appInput name="input" [(ngModel)]="input" />

从文档或其他方面，我无法看到如何循环浏览所有文件并将此更改更改为每个文件。此用例是否有任何示例/指标？

我知道 ng更新是用于从NG7迁移=> NG8将此操作添加到@ViewChild / ** TO DO-强制标志* /但不能缩小代码范围为此。

基本上，我该怎么做才能获得所有HTML文件的句柄

export function appInputs(_options: any): Rule {
  return (tree: Tree, _context: SchematicContext) => {
  console.log('schematic called');
  const workspaceConfig = tree.read('/angular.json');
  // convert workspace to string
  if (workspaceConfig) {
    const workspaceContent = workspaceConfig.toString();

    // parse workspace string into JSON object
    const workspace: experimental.workspace.WorkspaceSchema = JSON.parse(workspaceContent);
    console.log(workspace);
  }

  return tree;
};
}

Answer 1

即使问题很旧，这也可能是一个答案： https://blog.angular.io/schematics-an-introduction-dc1dfbc2a2b2

基本上，请阅读Tree接口API，您可以使用一些方法，希望对您有所帮助：

tree.getDir(options.sourceDir)
          .visit(filePath => {

Answer 2

是的，这没有得到很好的记录。

不幸的是，您不能使用jsdom之类的JavaScript AST工具来修改Angular模板。 serialize（..）方法将破坏您的指令，事件，方法和标记注释-否则只会序列化。

也就是说，您仍然可以使用jsdom之类的JS AST工具来定位要修改的元素的文件位置，偏移位置，然后使用逻辑示意图记录器进行那些修改。

类似

    // get the length -- from the begining to where the attr should go
    const INPUT_OFFSET = '<input'.length;

    const buffer = tree.read(FILE_PATH);
    const content = buffer.toString();

    // make sure you explictly tell fsdom to use includeNodeLocations
    const dom = new FSDOM(content, { includeNodeLocations: true });
    const elements = dom.window.document.querySelectorAll('input');

    // use the schematics tree recorder to update
    // we wont use the serialize(..) method of fsdom
    const recorder = tree.beginUpdate(FILE_PATH);

    elements.forEach(element => {
      // get the location in the source HTML of the element
      const locations = dom.nodeLocation(element);

      if (locations) {
        // add the directive, keep the white space on either side
        recorder.insertLeft(locations.startOffset + INPUT_OFFSET, ' appInput ');
      }
    });


    // all updates are committed without interfering with each offset
    tree.commitUpdate(recorder);

    return tree;

使用原理图更改角度项目的HTML内容

2 个答案: