文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
    • 综合排序
    • 最热优先
    • 最新优先
    时间不限
    时间不限
    最近一周
    最近一月
    最近三月
  • 来自专栏全栈修仙之路

    ng-content 中隐藏的内容

    然后你发现了 <ng-content>，并找到了一些关于它的文章，进而实现了所需的功能。 接下来我们来通过一个简单的示例，一步步介绍 <ng-content> 所涉及的内容。 如果 ng-content 上没有设置 select 属性，它将接收全部内容，或接收不匹配任何其他 ng-content 元素的内容。 ></ng-content>

    <ng-content select="counter"></ng-content> </div
    <ng-content></ng-content>
    <ng-content></ng-content 'Hide' : 'Show' }} </button>
    <ng-content></ng-content>

    3.8K30发布于 2019-11-06
  • 来自专栏张志敏的技术专栏

    在 Angular 应用中创建包含组件

    -- single slot transclusion here --> <ng-content></ng-content>

    </ng-content>
    <ng-content select="[card-header]"></ng-content>
    <! -- add the select attribute to ng-content --> <ng-content select="[card-body]"></ng-content>
    <ng-content select="[card-footer]"></ng-content>
    用法也相应的修改一下

    7.3K20发布于 2020-08-07
  • 来自专栏前端布道

    Angular开发实践（八）： 使用ng-content进行组件内容投射

    这时就要请出本文的主角 ng-content。 ></ng-content>

    <ng-content></ng-content>
    如果 ng-content 上没有设置 select 属性，它将接收全部内容，或接收不匹配任何其他 ng-content 元素的内容。 ></ng-content>
    <ng-content select="header"></ng-content 原因就是 <ng-content select="header"></ng-content> 无法匹配到之前的 标签 header，故而将这部分内容投射到了橙色区域的 <ng-content></ng-content

    3.5K81发布于 2018-04-11
  • 来自专栏全栈修仙之路

    Angular ViewChild和ViewChildren

    select="h3"></ng-content> <label> 邮箱 <input type="email" name="email" ngModel select="auth-remember"></ng-content> <auth-message [style.display]="(showMessage 'inherit' : 'none')"> </auth-message> <ng-content select="button"></ng-content> select="auth-remember"></ng-content> <auth-message [style.display]="(showMessage 'inherit' : 'none')"> </auth-message> <ng-content select="button"></ng-content>

    3.5K20发布于 2019-11-05
  • 来自专栏全栈修仙之路

    Angular 内容投影

    接下来我们来看一下，如何利用 <ng-content> 指令实现上述的功能。 如果 ng-content 上没有设置 select 属性，它将接收全部内容，或接收不匹配任何其他 ng-content 元素的内容。 select="auth-remember"></ng-content> <ng-content select="button"></ng-content> </form> ContentChild 上面我们已经介绍了内容投射的相关概念及 <ng-content> 指令的常见用法。下面我们来介绍在组件内部，如何获取 <ng-content> 投射的内容。 /div> <ng-content select="button"></ng-content> </form>

    ` }) export class

    3.3K20发布于 2019-11-05
  • 来自专栏小鑫同学编程历险记

    【Angular教程】-内容投影\u002F@ContentChild\u002F@ViewChild

    投影一块内容 容器组件这样写

    编号1 <ng-content></ng-content>
    业务组件这样用 <app-page-container> 未指定投影位置的内容会被投影到无 ="h3"></ng-content> <ng-content select=".my-class"></ng-content> <ng-content select="app-my-hello "></ng-content> <ng-content select="[content]"></ng-content>
    业务组件这样用 <app-page-container> 在这种情况下，不建议使用 ng-content 元素，因为只要组件的使用者提供了内容，即使该组件从未定义 ng-content 元素或该 ng-content 元素位于 ngIf 语句的内部，该内容也总会被初始化
    <ng-content *ngIf="false" select="app-my-hello"></ng-content>
    ​ 5.

    1.2K30编辑于 2022-12-25
  • 来自专栏finleyMa

    Angular 实现一个 Dialog 组件

    dialog-content">

    {{dialogTitle}}
    <ng-content select=".dialog-body"></ng-content>
    <ng-content select =".dialog-footer"></ng-content>
    补充样式 .overlay { .... } .dialog-container </app-my-dialog> dialogRef 是这个组件的引用别名 <ng-container class="dialog-body"> 类似Vue中的插槽，之内的html会替换组件内部的<ng-content select=".dialog-body"></ng-content> 效果如下，点击show按钮，显示弹窗，点击弹窗中的关闭按钮，恢复原样。

    • 1.8K20发布于 2019-07-01
  • 来自专栏狮乐园

    高级 Angular 组件模式 (3b)

    toggle>

    允许通过`withToggle ## 实现 ### 1）将``<toggle>``作为一个指令 将``<toggle>``组件改变为指令十分简单，因为它本身的模板仅仅是``<ng-content ></ng-content>``，在组件渲染时，``<ng-content>``会被替换为我们当前组件标签内包含的内容，所以我们可以直接移除它，并使用``@Directive``装饰器来描述``<toggle `withToggle.toggle``来访问它所绑定的``toggle``指令的实例，如下： @Component({ selector: ‘toggle-off’, template: <ng-content on"></ng-content>, }) export class ToggleOffComponent { constructor(public withToggle: WithToggleDirective

    1.3K10发布于 2018-10-19
  • 来自专栏ionic3+

    【组件篇】ionic3分组索引及锚点滚动列表

    index-list">

    <ng-content ></ng-content>
    <ion-item-divider #header color="{{headColor}}">{{index}}</ion-item-divider> <ng-content ></ng-content> </ion-item-group> index-group.scss不需要 index-group.ts： import { Component, Input, ViewChild

    2K20发布于 2018-08-20
  • 来自专栏Angular&服务

    Angular2 组件（页面）之间如何传值

    this.count++; this.countChange.emit(this.count); } } ---- app/counter.component.html

    <ng-content ></ng-content> Count: {{ count }} - <button (click)="increment()">Increment</button>

    <

    4.8K50发布于 2018-08-20
  • 来自专栏web全栈潮流

    Angular v18 现已推出！

    以下是 v18 的一些亮点：指定 ng-content 的回退内容我们遇到的最受好评的问题之一是为 ng-content 指定默认内容。在 v18 中，它现在可用！ 下面是一个简单示例：@Component({ selector: 'app-profile', template: ` <ng-content select=".greeting">Hello </ng-content> <ng-content>Unknown user</ng-content> `,})export class Profile {}现在我们可以使用组件：<app-profile

    5.5K10编辑于 2024-06-21
  • 来自专栏全栈程序员必看

    angular面试题及答案_angular面试

    6. ng-content指令？ 在标记之间可以添加内容，eg:

    this is a paragraph

    .那我们如果想在angular的标签之间添加内容呢，例如在<app-test></app-test>,这种情况下就可以使用<ng-content >tag directive is used</ng-content> 7. router.navigate 的使用？ ViewChildren 都支持 Type<any>|Function|string 类型的选择器 不同点 ContentChild 用来从通过 Content Projection 方式 (ng-content

    15.5K120编辑于 2022-11-02
  • 来自专栏Google Dart

    AngularDart 4.0 高级-生命周期钩子 顶

    after_content_component.dart (template) template: '''

    -- projected content begins --
    <ng-content ></ng-content>
    -- projected content ends --

    {{comment}}

    ''', <ng-content>标记是外部内容的占位符。 内容投影的指示标记是(a)组件元素标签之间的HTML和(b)组件模板中存在<ng-content>标签。 AfterContent挂钩 AfterContent挂钩与AfterView挂钩类似。

    8.5K10发布于 2018-08-14
  • 来自专栏Google Dart

    AngularDart Material Design 记分卡 顶

    ng-content: name - 标签区域中的自定义内容。 value - 值区域中的自定义内容。 description - 描述区域中的自定义内容。

    93340发布于 2018-09-30
  • 来自专栏狮乐园

    高级 Angular 组件模式 (2)

    Content代表内容，这些内容在组件渲染时已经存在于组件声明标签的内部，通常在组件内部以<ng-content>为占位符 View代表视图，视图代表组件本身的模板，代表组件本身的渲染逻辑 @ContentChildren

    1.1K30发布于 2018-10-19
  • 来自专栏贺贺的前端工程师之路

    Angular2 之 Animations

    Component({ selector: 'my-fader', template: `

    <ng-content ></ng-content>

    Can you see me?

    2.8K10发布于 2018-08-21
  • 来自专栏深度学习与python

    Angular 18 引入了 Zoneless 变更检测

    现在可以在 Angular 18 中为 ng-content 指定默认的内容。这允许开发人员在他们的组件中提供回退内容。

    1K10编辑于 2024-07-12
  • 来自专栏Google Dart

    AngularDart4.0 高级-组件样式 顶

    , template: '''

    {{hero.name}}

    <hero-team [hero]="hero"></hero-team> <ng-content ></ng-content>''', styleUrls: const ['hero_details_component.css'], directives: const [HeroTeamComponent

    3K20发布于 2018-08-14
  • 来自专栏CRPER折腾记

    Angular 2 + 折腾记 ：(4)初步了解路由及使用

    路由相关的指令或者术语 <router-outlet> :路由占位符，可以理解为渲染路由组件的区域，一个组件只能一个无命名<router-outlet>，命名的可以多个 ng-content: 可以嵌套一个组件的内容在另外一个组件中

    3.7K20发布于 2018-08-28
  • 来自专栏JadePeng的技术博客

    Angular快速学习笔记(4) -- Observable与RxJS

    visible"> <ng-content></ng-content>

    `}) export class ZippyComponent { visible

    7.4K20发布于 2018-05-28
    • 第 2 页

    腾讯云开发者

    扫码关注腾讯云开发者

    扫码关注腾讯云开发者

    领取腾讯云代金券

    热门产品

    热门推荐

    更多推荐

    Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

    深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

    腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

    领券