Angular自学笔记（?）ContentChild和ContentChildren

最新推荐文章于 2022-09-15 21:21:48 发布

yusirxiaer

最新推荐文章于 2022-09-15 21:21:48 发布

阅读量370

点赞数

CC 4.0 BY-SA版权

分类专栏： Angular自学笔记

本文链接：https://blog.youkuaiyun.com/yusirxiaer/article/details/113828596

Angular自学笔记专栏收录该内容

15 篇文章 ¥9.90 ¥99.00

订阅专栏

这篇Angular自学笔记详细介绍了ContentChild和ContentChildren的使用。ContentChild用于获取投影中的单个组件或元素，而ContentChildren则用于批量获取，且支持通过descendants属性来决定是否查找所有层级的子组件。

ContentChild

用法类似ViewChild, 获取投影中到组件或指令还有元素dom等

获取投影中但组件

import {
   
   AfterViewInit, Component, ElementRef, OnInit, ViewChild} from '@angular/core';

@Component({

了解本专栏

订阅专栏解锁全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

yusirxiaer

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

订阅专栏

Angular学习笔记

m0_60888118的博客

02-05

900

由于项目需要，最近学习了angular框架，相比于vue,angular还是有一定的难度，所以做一个记录与总结，方便以后学习！

angular学习笔记

04-30

此学习笔记内容有angular中的变量定义，数据绑定，$scope作用域，事件绑定，过滤器，脏值检测（表单验证），定时器服务的注入，链接指令，类属性和样式指令，选择和循环，自定义指令，$http服务，路由（ngRoute和ui-...

参与评论您还未登录，请先登录后发表或查看评论

angular ContentChild ContentChildren

yanyi24的博客

02-22

1225

ContentChild与ContentChildren跟我们上一节介绍的ViewChild与ViewChildren用法几乎一致。他们都是装饰器，但是区别在于，前者是获取投影（ng-content）中的组件、元素等。（原文阅读） @ContentChild() ContentChild的元数据跟ViewChild一样，也是有下面三个： selector- 用于查询的指令类型或名字。 read- 从查询到的元素中读取另一个令牌。 static- 如果为true，则在更改检测之前解析查询结果；.

【Angular】组件内容嵌入ng-content

王如霜

12-18

2294

组件的内容嵌入：在组件中嵌入模板代码，提高组件的可复用性。很好得扩充组件的功能，方便代码的服用。典型的例子就是：模态对话框或导航栏的使用，通常模态对话框和导航栏的样式是一样的，这是如果有一个模板，我们只负责往里面填充数据，是不是就方便使用多了，组件内容嵌入就是解决此类问题的。下面举例说明：文件目录如下： // example-content.component.ts import {

Angular注解学习

qq_41248529的博客

09-13

1413

@viewChild 作用一：选择组件内节点  <div #mydiv><input></div> // 选择 @ViewChild('mydiv') mydiv: ElementRef // 返回原生节点 let el = this.mydiv.nativeElement // // 使用原生方法 let ipt = e...

[译] angular中的ng-template, ng-content, ng-container

qq_36205941的博客

09-15

718

angular中的ng-template, ng-content, ng-container

Angular 进阶之一： Projection (ng-content)

KenkoTech的博客

01-14

1085

在开发一个前端程序时，肯定会有很多相似的逻辑或布局，这时就需要提取公共组件或样式来尽可能的复用代码。在angular中，提供了ng-content来更方便的编写组件和布局。 ng-content在一个Angular组件中的view层起到的作用类似于占位符。外部内容被投射进当前组件，替代ng-content的位置，另：不管是否存在外部内容ng-content都不会被渲染到页面中。主要作用及特点：在组件中嵌入内容在组件中嵌入模板代码 select属性支持css选择器（”#id”,”...

Angular4学习笔记之准备和环境搭建项目

12-08

Angular4是Google支持的前端开发框架，相较于早期的Angular1.x，它引入了许多改进和优化。Angular4在设计理念上更加现代化，旨在提供一个完整的解决方案，包括路由、数据绑定、依赖注入等特性，使得构建复杂的单页...

Angular ng-content @ContentChild @ContentChildren

weixin_41070695的博客

05-18

476

组件1.html <div> <ng-content select="button"></ng-content> <ng-content select="组件2的selector"></ng-content> </div> 父组件.html <组件1> <button type="button">button</button> <组件2></组件2> </组件1

Angular4-在线竞拍应用-ngContent指令

杨钊

11-01

1722

ngContent指令新建项目demo6新建组件ng g component child投影，在某些情况下，需要动态改变模板的内容，可以用路由，但路由是一个相对比较麻烦的东西，而我要实现的功能没有那么复杂，，没有什么业务逻辑，也不需要重用。这个时候可以用投影。可以用ngContent将父组件中任意片段投影到子组件中修改child.component.html<div class="wrapper">

angular ： @ContentChildren

好好学习，天天向上～

11-27

628

@ContentChildren(MyColorDirective,{ descendants:true })ListOfColor:QueryList<MyColorDirective>;

ng-content @ContentChild @ContentChildren学习

我的技术博客

02-28

1388

参考博客:https://segmentfault.com/a/1190000008707828 我们在写HTML时经常使用到标签嵌套,比如: <div> <p>嵌套</p> </div> 在angular自定义标签里面能否实现标签的嵌套呢?答案是肯定的. /* parent.component.ts */ import { Co...

11、ContentChild和ViewChild

学海无涯苦作舟

02-09

1112

在6.3节中使用ng-content投影过去的复杂组件，我们需要使用代码操作它该怎么做呢？使用@ContentChild装饰器可以获取到被投影的组件的实例首先父组件中使用子组件，并投影另一个组件：然后再子组件中通过ng-content，使用select设置一个占位，以备投影：在投影进去的组件中导入ContentChild等必要模块。然后使用@ContentChild()装饰器，声明一个需要使用的

Angular6 学习笔记——内容投影, ViewChild和ContentChild

weixin_30883777的博客

02-19

293

angular6.x系列的学习笔记记录,仍在不断完善中,学习地址: https://www.angular.cn/guide/template-syntax http://www.ngfans.net/topic/12/post/2 系列目录 (1)组件详解之模板语法 (2)组件详解之组件通讯 (3)内容投影, ViewChild和ContentChild (4)指令 ...

获取列表元素(Directive,selector,ContentChildren)

tanglau的专栏

06-29

1026

http://www.open-open.com/lib/view/open1461113267205.html 如果你想获取的元素不在你的组件模版定义里怎么办？举个例子，假设你有个列表组件，允许用户自定义各列表项，然后你想跟踪列表项的数量。当然你可以用 @ContentChildren 来获取组件里的“内容”(那些用户自定义，然后映射到你组件里的内容)，但因为这些内容可以是任意

Angular5--viewChild/viewChildren、contentChild/contentChildren使用规则小结

weixin_33831196的博客

02-10

284

2019独角兽企业重金招聘Python工程师标准>>> ...

Angular 2 中的 ViewChildren 和 ContentChildren

04-29

1827

原文地址:http://zai.io/topic/detail/news/fd4327d2fe6f801a 在这篇文章中，我将解释在Angular 2中view children和content children之间的区别，我们将看看如何从父组件来访问这两种不同的children,除了这些内容，我们也将

Angular 2 ContentChild & ContentChildren

weixin_33862188的博客

03-15

212

前面的文章我们已经介绍过了 Angular 2 的 ViewChild & ViewChildren 属性装饰器，现在我们就来介绍一下它们的兄弟 ContentChild 和 ContentChildren 属性装饰器。我想通过一个简单的需求，来引入我们今天的主题。具体需求如下：熟悉 Angular 1.x 的用户，应该都知...

Angular 中 @ViewChild 与 @ContentChild 的区别

YuJinpan的博客

05-08

1401

概述在组件交互中，组件之间的镶嵌一般有两种方式：在创建父组件时将子组件直接写在模版中。子组件通过投影方式嵌入父级组件，通过 ng-content 形式。在这两种情况下，如果我们需要访问子组件的公开属性或方法，就需要使用 @ViewChild 与 @ContentChild 装饰器了。他们依次代表上面的两种情况，具体使用如下。实例对于第一种（@ViewChild()）： // te...