如何解决棱角分明泛化组件的规范方式
我正在最新的 (11) Angular 中创建树状通用结构。
鉴于最少的无类型代码https://stackblitz.com/edit/angular-module-sandbox-wurxnb?file=src/app/tree.component.ts,我几乎得到了我想要的一切。
剩下的一个问题 - 这种树状结构不是“泛化”的。我希望能够自由选择“中间”元素的实现 - dummy-node
中的 tree.component.ts
,保持在此实现中注入 <tree>..
的可能性(例如将其作为 { {1}} 在我的示例中)。
为了解决这类问题,我陷入了各种可能的解决方案的兔子洞中,包括使用动态创建的组件、ngTemplateOutlet、模板等,但我没有成功。
我想这种问题有解决方案。内容 (<ng-content>
) 以哪种方式传递给“中间”元素并不重要,“中间”元素的选择方式也无关紧要(使用某种“上下文”输入或作为 {{1 }} 本身),我唯一想实现的是通用的树状结构。
编辑(#1)
好的,我使用 ngTemplateOutlet - https://stackblitz.com/edit/angular-module-sandbox-9jtrfb?file=src/app/tree.component.ts 部分找到了解决方案。使用此代码,我应该能够使用 <tree>..
标记传递自定义“中间”组件。还有一个问题 - 我在文件 <tree..>
和 <ng-template>
中有很奇怪的代码重复。两个文件都使用 app.component.html
,第一个用于“开始”递归,第二个用于“传播”它。但是这些 dummy-node.component.html
的内容是相同的,这会导致代码丑陋。我想清除这种重复。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。