angular - 如何修改带有 Angular 示意图的 HTML 文件

Question

假设我们有一个现有的 Angular 组件，包括 menu.component.html :

<ul>
  <li><a href="/home">home</a></li>
  <li><a href="/about">about</a></li>
</ul>

目标是在“关于”之后添加一个带有 Angular 示意图的新链接

 <li><a href="/contact">contact</a></li>

有什么想法吗？

Answer 1

你可以这样做:

export function myComponent(options: any): Rule {
  return (tree: Tree, _context: SchematicContext) => {
    const content: Buffer | null = tree.read("./menu.component.html");
    let strContent: string = '';
    if(content) strContent = content.toString();

    const appendIndex = strContent.indexOf('</ul>');
    const content2Append = '    <li><a href="/contact">contact</a></li> \n';
    const updatedContent = strContent.slice(0, appendIndex) + content2Append + strContent.slice(appendIndex);

    tree.overwrite("./menu.component.html", updatedContent);
    return tree;
  };
}

请注意，这是一个非常原始的解决方案。 nodejs 中有 DOM 解析器库，可以让你的生活更轻松 (jsdom)。您可以将 content2Append 变量作为输入并为您的用例清理它。