假设我们有一个现有的 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>
有什么想法吗?
最佳答案
你可以这样做:
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
变量作为输入并为您的用例清理它。
关于angular - 如何修改带有 Angular 示意图的 HTML 文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51365391/