是否可以在角度 2+ 中进行条件内容投影(嵌入)

2024-02-14

我想提供仅在内容未被嵌入时才会出现的默认内容。

例如,这是我的组件模板:

<article>
    <header>
        <ng-content select="[header]"></ng-content>
    </header>
    <section>
        <ng-content></ng-content>
    </section>
</article>

我可以这样使用它:

<my-component>
    <h1 header>This is my header</h1>
    <p>This is my content</p>
</my-component>

现在如果我想提供默认标头怎么办?是否可以;无需像检查内容这样的杂技ngAfterContentInit?


你可以用纯 CSS 来做到这一点! 假设您有以下内容

<ng-content select=".header"></ng-content>
<h1 class="default-header">
     This is my default header
</h1>

那么如果提供了内容,以下 CSS 将隐藏标题:

.header + .default-header {
    display: none;
}

如果未提供标头,则不匹配 display:none 规则。

请注意,您必须关闭内容封装才能使用此功能:encapsulation: ViewEncapsulation.None

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

是否可以在角度 2+ 中进行条件内容投影(嵌入) 的相关文章

随机推荐

  • 在Python中将负值打印为十六进制

    我有以下 C 代码片段 for int x 4 x lt 5 x printf hex x d 0x 08X n x x 它的输出是 hex x 4 0xFFFFFFFC hex x 3 0xFFFFFFFD hex x 2 0xFFFFF
  • 具有不同样式的多个 jQuery UI 日期选择器

    我的页面上有两个 jQuery 日期选择器 普通的一个 一种只能选择年 月的 特殊 的 特殊的一个使用了一些自定义 CSS 从这里 https stackoverflow com questions 2208480 jquery date
  • 多态不是继承的副作用吗?

    我刚刚学习了 oop 并且正在努力解决继承和多态性之间的区别 如果我理解正确的话 继承定义了类型层次结构和类之间的关系 子类从父类继承行为 并且可以提供父类上任何公共接口的专门行为 多态性是这些子类可以提供自己的行为 同时仍然遵守父接口 这
  • 如何捕获返回 lambda 的函数的返回值类型?

    鉴于此代码 template
  • JAXB - 属性“值”已定义。使用 解决此冲突

    使用 JAXB 生成 XML 绑定类 该架构基于一组旧版 XML 文件 并包含以下代码片段
  • 回调notifyiteminserted/notifyitemremoved/notifyitemmoved

    寻找一些非常简单的东西 我在源代码中查看了RecyclerView但找不到任何东西 在我开始实现我自己的版本之前 我想知道是否有人知道如何接收动画回调notifyiteminserted notifyitemremoved notifyit
  • haskell:输出非ascii字符

    我想在 WinGHCi 中输出非 ASCII 字符 但这就是我得到的 Prelude gt 948 Prelude gt putStr 948 Exception
  • Spring boot 中的 CORS 策略冲突

    我是 Spring Boot 的新手 我使用 Spring Boot 实现了一些基本的 REST api 当我尝试使用 React 调用这些 api 时 我在调用某些 CORS 策略时遇到错误 然后我找到了该问题的解决方案 除了登录 api
  • 针对数据库的 EF 模型验证

    我想使用 EF 5 模型验证来避免数据库中出现重复值 因此我使用如下模型类 Table MeasureUnits public class MeasureUnit IValidatableObject public int MeasureU
  • 将自定义代码样式 xml 传递给 gradle idea 插件

    有没有办法告诉gradle idea插件在生成项目文件时使用自定义代码样式xml 我总是可以将 xml 复制到 Library Preferences IntelliJIdea13 codestyles 中 然后在导入项目后更改代码样式 但
  • gradle和manifest上的Android sdk版本

    我几周前开始使用 Android Studio 有一个问题 在 build gradle 文件中 我们可以像在清单中一样设置 minSdkVersion 但是一个会覆盖另一个吗 如果我们在 gradle 和 Manifest 上设置不同的值
  • Django:自动生成目录中的文件列表

    我在我的网站上使用图片库应用程序 目前 我将图像文件放在一个目录中 并手动为每个图像编写 img html 标签 是否可以让 django 自动在目录中创建文件列表 并将 json 输出发送到图库应用程序 以便我可以使 javascript
  • 如何在 Angular 拦截器内的请求正文中添加一些内容?

    在这里 我可以修改标题 因为有多个关于此功能的教程 但是 Injectable export class MyFirstInterceptor implements HttpInterceptor constructor private c
  • 离线时准确检测时间

    背景资料 我正在开发一个连接到服务器的 iOS 应用程序 可以从设备向服务器发出请求 以将本地数据库与服务器的数据库同步 更改可能发生在任一数据库上 该应用程序还具有离线功能 用户可以在不连接到互联网连接的情况下修改数据 只有在线才能通过发
  • 在怪癖模式下无法正常工作的所有内容的列表? [关闭]

    Closed 这个问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 有人有 Quirks 模式 特别是 IE Quirks 模式 中存在 bug 的 HTML JavaS
  • 用户提供的 MSSQL 数据库的 Pivotal/Django 设置

    我在 Pivotal Cloud Foundry 上部署了一个 django 应用程序 在开发过程中 我只是坚持使用内置的 sqlite 数据库 同时将 UI 组合在一起 不需要保留数据 因此推送 删除不是问题 此后 我在本地服务器 Azu
  • 使用相似性 Postgres 模糊自连接查询提高性能

    我正在尝试运行一个查询 该查询将表与自身连接起来 并进行模糊字符串比较 使用三元组比较 以查找可能的公司名称匹配 我的目标是返回一个记录的公司名称 ref name 字段 的三元相似度与另一记录的公司名称匹配的记录 目前 我将阈值设置为 0
  • PHP 按索引对二维数组进行排序(非关联)

    该代码无法正常运行 但它表明了我正在尝试做的事情 function sort 2d by index a i function cmp x y Nested function can t find i global i defeats th
  • putStrLn 不打印到控制台

    我正在尝试 wxHaskell 我无法在 ghci 下运行该应用程序 因此我必须使用应用程序来测试它 我想用 println 调试来测试程序 然而 putStrLn 似乎在 GUI 中不起作用 LANGUAGE Haskell2010 mo
  • 是否可以在角度 2+ 中进行条件内容投影(嵌入)

    我想提供仅在内容未被嵌入时才会出现的默认内容 例如 这是我的组件模板