如何从父组件中取出子组件即在 DOM 中没有呈现“ghost”标签

问题描述

编辑：我已经研究过这个主题，我能找到的所有答案都不能在我的代码中随处实现。它们中的大多数用于 <td> 或任何您有一个覆盖整个内容的标签的情况。我试图在此处描述为什么我的问题与其他问题略有不同，但如果我真的错过了此处的类似问题，请随时将其标记为重复。

我目前正在使用一个动态呈现的 Angular 应用程序，我在其中进行 API 调用以从后端获取要呈现的 JSON。

在应用程序中，我们有不同类型的磁贴，为了避免代码重复，我将磁贴分为两部分：标题 (tile-header) 和内容 (tile-content)。这些图块部分中的每一个都根据其图块类型控制要呈现的内容。

这里的问题是，整个应用的样式由设计团队监管（需要很长时间才能做出任何更改），而且他们有时会在 CSS (>) 中使用直接子选择器。如您所料，这当然不适用于 Angular 的设计工作方式。

对于某些组件，我找到了一个解决方案，即使用方括号在组件外创建指令，例如：selector: [tile-type-a] 并使用它，如下所示（这是模板在结束）：

<article tile-type-a>
    <tile-header>
        <div class="background-image">
        <h3>Headline 1</h3>
        <div class="copytext">Text 123</div>
    </tile-header>
    <tile-footer>
        <div class="buttonlist">...</div>
        <div class="linklist">...</div>
    </tile-footer>
</article>

<article tile-type-b>
    <tile-header>
        <h3>Headline 1</h3>
        <div class="copytext">Text 123</div>
    </tile-header>
    <tile-footer>
        <div class="buttonlist">...</div>
    </tile-footer>
</article>

所以现在我的问题是，如何对 <tile-header> 和 <tile-footer> 执行相同的操作？它与 tile-type 配合得非常好，因为它上面有一个 <article> 标签，所以我可以简单地将 <article> 标签放在外面并将指令放入其中。但是对于 <tile-header> 和 <tile-footer>，它没有到处都是这样的标签，而是不同的标签，例如<div>、<h3> 等处于同一级别。

基本上，我最终想在 DOM 中渲染的是：

<article tile-type-a>
    <div class="background-image">
    <h3>Headline 1</h3>
    <div class="copytext">Text 123</div>
    <div class="buttonlist">...</div>
    <div class="linklist">...</div>
</article>

<article tile-type-b>
    <h3>Headline 1</h3>
    <div class="copytext">Text 123</div>
    <div class="buttonlist">...</div>
</article>

同时保留 Angular 代码库中的“模块化”。

先谢谢你！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

angular angular-components angular-directive angular2-directives html