时间戳

首页 > 解决方案 > 如何从父组件中取出子组件（即在 DOM 中没有呈现“ghost”标签）

html - 如何从父组件中取出子组件（即在 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>and做同样的事情<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 代码库中的“模块化”。

先感谢您！

标签： htmlangularangular-directiveangular2-directivesangular-components

解决方案

推荐阅读