英文:
How to render a component without its wrapping tag
问题
<div class='w-full flex relative'>
<!-- search component -->
<app-search></app-search>
<div class='absolute right-0 flex justify-end gap-6'>
<!-- manipulate nav component-->
<app-manipulate-nav></app-manipulate-nav>
</div>
</div>
这段代码看起来不如预期工作。我的页面应该是这样的
，但实际渲染结果却是这样的
，这是因为组件包装标签的原因。
我已经尝试在开发工具中移除组件标签（使用ctrl+shift+I），那样可以正常工作，还尝试了ng-container，但没有成功。是否有其他方法来渲染这个内容？
英文:
<div class='w-full flex relative'>
<!-- search component -->
<app-search></app-search>
<div class='absolute right-0 flex justify-end gap-6'>
<!-- manipulate nav component-->
<app-manipulate-nav></app-manipulate-nav>
</div>
</div>
This is not working as expected
my page should be this
but it render like this
because of component wrapping tag
I have tried to remove component tag on inside devtools(ctrl+shift+I) that was working and i have tried ng-container but that does not work. Any other way to render this??
答案1
得分: 1
只需尝试直接在您的 app-manipulate-nav 组件上应用您的 CSS。
<div class='w-full flex relative'>
<!-- 搜索组件 -->
<app-search></app-search>
<app-manipulate-nav class='absolute right-0 flex justify-end gap-6'></app-manipulate-nav>
</div>
如果这不起作用，您需要共享您的子组件的HTML和CSS。这是一个CSS问题，没有必要“删除标记”（顺便说一句，这是不可能的）。将标记视为一个完全未经样式化的HTML元素。
英文:
Just try and apply your CSS directly on your app-manipulate-nav component.
<div class='w-full flex relative'>
<!-- search component -->
<app-search></app-search>
<app-manipulate-nav class='absolute right-0 flex justify-end gap-6'></app-manipulate-nav>
</div>
If it doesn't do the trick, you'll need to share you child component's HTML and CSS. This is a CSS issue, there's no need to "remove the tag" (which is impossible by the way). See the tag as a completely unstyled HTML element.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论