首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Angular 7如何获取具有自定义指令属性的所有子元素

Angular 7中,要获取具有自定义指令属性的所有子元素,可以使用@ContentChildren装饰器和QueryList类来实现。

首先,需要在自定义指令中定义一个属性,用于标记子元素。例如,假设我们有一个名为CustomDirective的自定义指令,可以在指令中定义一个属性@ContentChildren('customElement') customElements: QueryList<ElementRef>;

然后,在父组件或父指令中,可以使用@ViewChild@ContentChild装饰器来获取包含自定义指令的父元素或父指令。例如,假设我们有一个名为ParentComponent的父组件,可以在组件中定义一个属性@ContentChildren(CustomDirective) customDirectives: QueryList<CustomDirective>;

接下来,在父组件或父指令的ngAfterContentInit生命周期钩子函数中,可以订阅customDirectiveschanges事件,并在回调函数中获取具有自定义指令属性的所有子元素。例如:

代码语言:txt
复制
import { Component, ContentChildren, QueryList, AfterContentInit, ElementRef } from '@angular/core';
import { CustomDirective } from './custom.directive';

@Component({
  selector: 'app-parent',
  template: `
    <div customElement></div>
    <div customElement></div>
    <div customElement></div>
  `
})
export class ParentComponent implements AfterContentInit {
  @ContentChildren(CustomDirective) customDirectives: QueryList<CustomDirective>;

  ngAfterContentInit() {
    this.customDirectives.changes.subscribe(() => {
      const customElements = this.customDirectives.toArray().map(directive => directive.customElements);
      console.log(customElements);
    });
  }
}

在上面的例子中,我们定义了一个ParentComponent父组件,并在模板中使用了三个具有自定义指令属性的子元素。在ngAfterContentInit生命周期钩子函数中,我们订阅了customDirectiveschanges事件,并在回调函数中通过toArray()方法将QueryList转换为数组,然后使用map()方法获取每个自定义指令的customElements属性,最后打印输出结果。

需要注意的是,@ContentChildren装饰器用于获取父组件或父指令中包含的子元素,而@ViewChild装饰器用于获取父组件或父指令中的单个子元素。另外,QueryList类是Angular提供的一个集合类,用于管理查询结果。

推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云云数据库MySQL。

  • 腾讯云云服务器(CVM):腾讯云提供的弹性计算服务,可快速创建和管理云服务器实例,支持多种操作系统和实例规格,具有高性能、高可靠性和高可扩展性。了解更多信息,请访问腾讯云云服务器(CVM)产品介绍
  • 腾讯云云数据库MySQL:腾讯云提供的关系型数据库服务,基于MySQL架构,具有高可用、高性能和高安全性的特点,支持自动备份、容灾和监控等功能。了解更多信息,请访问腾讯云云数据库MySQL产品介绍
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

【17】进大厂必须掌握面试题-50个Angular面试

Angular提供程序是什么? 提供程序是Angular可配置服务。这是对依赖关系注入系统一条指令,它提供有关获取依赖关系值方式信息。...同样,应用程序所有依赖关系通常仅在模块中定义。 26.我们可以在哪种类型组件上创建自定义指令Angular支持创建以下内容自定义指令元素指令 -当遇到匹配元素时,指令将激活。...## 30.组件和指令生命周期挂钩是什么? Angular组件具有离散生命周期,其中包含从出生到死亡过渡不同阶段。...Angular事件是特定指令,可帮助自定义各种DOM事件行为。...高级水平–面试问题 46.在Angular中,描述如何设置,获取和清除cookie?

41.1K51

Angular 从入坑到挖坑 - 组件食用指南

,可以通过 angular 内置模板语法与 html 元素进行结合,从而告诉 angular 如何根据我们应用逻辑和数据来渲染页面 4.1.2.1、插值表达式 插值表达式可以将组件中属性值或者是模板上数据通过模板表达式运算符进行计算...(refMsgInput.value)"> 通过模板引入变量方式获取到输入值:{{refMsg}} 4.2、指令 4.2.1、属性指令 属性指令被应用在视图 dom 元素上,用来改变...="expr">NgIf 结构型指令 当 expr 属性为 true 时,这个元素则会显示在页面上,当属性值为 false 时,则不显示该元素 ngIf 指令并不是通过使用 css 样式来隐藏元素...,当值为 false 时,则这些元素会从 dom 中被销毁,并且所有监听该 dom 元素事件会被取消,当重新显示该元素时,会重新执行初始化过程 与销毁元素不同,对于隐藏元素来说,所有元素监听事件还会执行监听...@Input 用来获取数据,@Output 用来向外发送数据 4.4.2、组件获取父组件信息 在父组件中,添加对于组件引用,并将需要传递数据 or 方法绑定到组件上 传递数据直接将父组件中属性值赋值给绑定在组件上属性就可以了

15.8K30

AngularDart4.0 指南-体系结构概述 顶

自定义组件与原生HTML在相同布局中无缝混合。 元数据 ? 元数据告诉Angular如何处理一个类。 回顾HeroListComponent代码,你可以看到它只是一个类。...用户更改也会返回到组件,将属性重置为最新值,就像事件绑定一样。 Angular在每个JavaScript事件循环中处理所有数据绑定,从应用程序组件树根到所有组件。 ?...数据绑定在模板及其组件之间通信中起着重要作用。 数据绑定对于父组件和组件之间通信也很重要。 指令 ? Angular模板是动态。...它们倾向于以属性形式出现在元素标签内,有时候以名称形式出现,但更常见是作为赋值或绑定目标。 结构指令通过添加,删除和替换DOM中元素来改变布局。...属性指令会改变现有元素外观或行为。 在模板中,它们看起来像常规HTML属性,因此也就是名称。 实现双向数据绑定ngModel指令是一个属性指令例子。

7.9K30

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

Angular提供生命周期挂钩,提供这些关键生命时刻可视性以及发生时行为能力。 指令具有相同生命周期挂钩集,减去特定于组件内容和视图挂钩。...OnChanges 看看每次组件输入属性发生变化时,Angular如何用变更对象调用ngOnChanges钩子。 显示如何解释更改对象。...添加一个英雄会产生一个新英雄。 间谍ngOnInit记录该事件。 重置按钮清除英雄列表。 Angular从DOM中移除所有英雄元素并同时销毁他们间谍指令。...ngOnInit是组件获取其初始数据好地方。 教程和HTTP章节显示了如何。 还要记住,指令数据绑定输入属性在构建之后才会设置。 如果您需要根据这些属性初始化指令,那么这是一个问题。...关键区别在于组件 AfterView钩子涉及ViewChildren,组件元素标签出现在组件模板中。

6.1K10

2、Angular JS 学习笔记 – 双向数据绑定和Scope概念

从DOM获取到作用域: 作用域附在dom元素$scope属性上,可以获取用来做debug目的,它不太可能在应用中使用。根作用域被附在有ng-app指令dom元素上。...在控制台中获取当前元素所在作用域,需要执行:angular.element(0).scope() or just type scope 作用域内事件传播: 作用域可以类似dom事件一样传播事件,事件可以广播到作用域作用域或者是发到上层作用域...最后,angular执行一个digest周期使用根作用域,同时将会填充所有作用域。...指令和创建作用域 在大多数情况,指令和作用域交互不创建新作用域。无论如何,一些指令,像是ng-controller和ng-repeat,创建作用域并且将作用域赋予相对应dom元素上。...你可以从dom元素上使用angular.element(aDomElement).scope()函数获取作用域。查看指令文档了解更多关于作用域隔离信息。

13.2K20

Angular 自定义属性指令

本文将使用 UltimateAngular/angular-pro-src 中示例,来一步步介绍自定义属性指令相关知识。...该指令实现功能是,当鼠标移入到指定元素时(页面中 ? 元素),显示我们自定义提示消息。而当鼠标移出指定元素时,要隐藏我们自定义提示消息。...要实现该功能一种实现方案是,为应用 TooltipDirective 指令宿主元素动态添加一个元素,然后让它作为提示消息容器,当鼠标移入到指定元素时,显示前面动态添加元素。...此时,我们 TooltipDirective 指令,已经包含了控制 tooltip 元素显示和隐藏方法。那么现在问题是,我们要如何访问 TooltipDirective 指令实例。...本文通过 CreditCardDirective 和 TooltipDirective 两个指令,介绍了 Angular 自定义属性指令所涉及相关基础知识,若想继续深入学习的话,可以阅读 Angular

2K30

Angular源码分析之$compile

首先,linkFns数组用于存储每个DOM节点上所有指令处理后链接函数和节点上所有指令处理后链接函数,具体使用递归方式实现。...transclude属性,生成相关transclude处理函数,最终执行链接函数;如果当前指令并没有链接函数,则调用其元素链接函数,完成当前元素处理。...首先则是初始化相关属性,通过遍历节点所有指令,针对每个指令,依次判断$$start属性,优先级,隔离作用域,控制器,transclude属性判断并编译其模板,构建元素DOM结构,最终执行用户定义compile...函数,将生成链接函数添加到preLinkFns和postLinkFns数组中,最终根据指令terminal属性判断是否递归其元素指令,完成相同操作。...,完成隔离作用域属性单向绑定(@),双向绑定(=)和函数引用(&),针对隔离作用域双向绑定模式(=)实现,则是通过自定义编译器完成简单Angular语法编译,在指定作用域下获取表达式(标示符

1.5K50

浅谈Angular

ng-show本质上设置元素display值为none,只是设置样式,DOM结构还在,而*ngIf是真正意义上从DOM结构中移除结构型指令 *ngIf--控制元素显隐性 ?...来控制元素显隐 在自定义指令获取指令添加到其上面的元素,需要依赖注入ElementRef服务 如果自定义指令想要接收从外部传入值,需要使用@Input装饰器\....可以给@Input装饰器内部填写一个元数据,这个值是外部使用名字 内部还是使用原来名字 3.如果想要给指令添加元素绑定事件,需要使用@HostListener装饰器 如果要通过指令控制DOM显隐...,需要在指令内部获取到宿主元素和承载宿主元素容器,通过依赖注入templateRef和ViewContainerRef服务 4.管道:pipe 作用:对数据进行处理(删除,插入,过滤,拼接等)...,要声明在组件里 2.向父 -- @Output装饰器声明事件,要声明在组件里 3.兄弟之间 -- 中间人模式 拓展:事件源对象 在事件中,当前操作那个元素就是事件源。

4.4K10

Angular12个经典问题,看看你能答对几个?(文末附带Angular测试)

请解释Angular 2应用程序生命周期hooks是什么? Angular 2组件/指令具有生命周期事件,是由@angular/core管理。...一部分事件适用于组件/指令,而少数事件只适用于组件。 ngOnChanges:当Angular设置其接收当前和上一个对象值数据绑定属性时响应。...它是如何Angular 2中工作Angular 2不具有双向digest cycle,这是与Angular 1不同。...在Angular2中,组件中发生任何改变总是从当前组件传播到其所有组件中。如果一个组件更改需要反映到其父组件层次结构中,我们可以通过使用事件发射器api来发出事件。...简而言之,EventEmitter是在@ angular/core模块中定义类,由组件和指令使用,用来发出自定义事件。

17.3K80

带你走近AngularJS - 体验指令实例

基础知识,下面让我们通过实例来加深记忆,体验自定义指令乐趣。...一旦元素拥有了ID值,方法将通过jQuery来选择具有"accordion-toggle"类元素并且设置它 "data-parent" 和 "href" 属性。...最后,通过寻找“accordion-body” 元素,并且设置"collapse" 属性指令同时声明了一个拥有空方法controller 。...声明controller 是必要,因为Accordion会包含元素元素将检测父元素类型和controller 。 下一步需要定义手风琴选项卡指令。...它功能并不复杂但是足以展示一些AngularJS重要知识点和技术细节:如何定义嵌套指令如何生成唯一元素ID,如何使用jQuery操作DOM以及如何使用$watch 方法监听scope变量变化。

2.4K50

(转) 别再对 Angular 表单 ControlValueAccessor 感到迷惑

原生表单控件数量是有限,但是自定义表单控件是无限,所以 Angular 需要一种通用机制来桥接原生/自定义表单控件和 formControl 指令,而这正是 ControlValueAccessor...Angular 也为所有原生 DOM 表单元素创建了 Angular 表单控件(译者注:Angular 内置 ControlValueAccessor): Accessor Form Element...组件封装器 由于 Angular所有默认原生控件提供了控件值访问器,所以在封装第三方插件或组件时,需要写一个新控件值访问器。...jQuery 方法在原生 DOM 元素上创建一个 slider 控件,然后使用 widget 属性引用这个控件。...所有表单指令都是使用NG_VALUE_ACCESSOR 标识来注入控件值访问器,然后选择合适访问器(译者注:这句话可参考这两行代码,L175 和 L181)。

3.7K20

AngularDart4.0 指南- 模板语法一 顶

在下面的章节中,您将学习如何通过数据绑定来动态获取和设置DOM(文档对象模型)值。 从数据绑定插值第一种形式开始,看看有多少更丰富模板HTML可以使用。请回到顶部。 插值({{...}})...它是一个事件全部。 就是如何从用户操作更新应用程序状态。 响应事件是Angular“单向数据流”另一面。在事件循环这个周期中,您可以自由地在任何地方进行所有更改。...一种新心智模式 借助数据绑定所有功能以及使用自定义标记扩展HTML词汇表能力,将HTML模板视为HTML Plus是很有诱惑力 它确实是HTML Plus。...一个没有属性世界 在Angular世界中,属性(attributes)唯一作用是初始化元素指令状态。...] binding to the classes property 另一个是设置自定义组件模型属性(父组件和组件进行通信一个好方法): <hero-detail [hero]="currentHero

5.1K10

前端人员该怎么面试 经典Angular面试题有哪些

Angular 2组件/指令具有生命周期事件,是由@angular/core管理。@angular/core会创建组件,渲染它,创建并呈现它后代。...#FormatImgID_0# 2、事件发射器如何Angular 2中工作? Angular 2不具有双向digest cycle,这是与Angular 1不同。...在Angular2中,组件中发生任何改变总是从当前组件传播到其所有组件中。如果一个组件更改需要反映到其父组件层次结构中,我们可以通过使用事件发射器api来发出事件。...简而言之,EventEmitter是在@ angular/core模块中定义类,由组件和指令使用,用来发出自定义事件。 3、如何优化Angular 2应用程序来获得更好性能?...,才需要使用provider创建; 所有具有特定性目的对象都是通过factory方法去创建。

4.1K80

2020vue面试题及答案_人际关系面试题及答案

父子传参:父组件通过自定义属性方式传参,通过props属性组件传参,组件通过props属性去接收参数。 父传参:组件通过自定义事件方式传参,通过$emit去进行传参。...7. 框架和库:Angular 是一个框架而不是一个库,因为它提供了关于如何构建应用程序强有力约束,并且还提供了更多开箱即用功能。React 和 Vue 是是一种库,可以和各种包搭配。 8....组件之间传值方式不同:Angular 中直接父子组件,父组件可以直接访问组件 public 属性和方法,也可以借助于@Input 和 @Output 进行通讯。...当 Vue 处理指令时,v-for 比 v-if 具有更高优先级,通过v-if 移动到容器元素,不会再重复遍历列表中每个值。...38、如何获取dom 在我们vue项⽬中,难免会因为引⽤第三⽅库⽽需要操作DOM标签,vue为我们提供了ref属性。 ref 被⽤来给元素或⼦组件注册引⽤信息。

8.7K20

前端框架AngularJS入门

、ngAnimate 2)用户自定义模块 angular.module('模块名',[ ]) 入门小Demo 3.1 表达式 入门小Demo...表达式写法是{{表达式 }} 表达式可以是变量或是运算式 ng-app 指令 作用是告诉元素一下指令是归angularJs,angularJs会识别的 ng-app 指令定义了 AngularJS...表达式写法是{{表达式 }} 表达式可以是变量或是运算式 ng-app 指令 作用是告诉元素一下指令是归angularJs,angularJs会识别的 ng-app 指令定义了 AngularJS...3.3 初始化指令 我们如果希望有些变量具有初始值,可以使用ng-init指令来对变量初始化 入门小Demo-3 初始化 <script...3.8 内置服务 我们数据一般都是从后端获取,那么如何获取数据呢?我们一般使用内置服务$http来实现。注意:以下代码需要在tomcat中运行。

2.4K30

AngularDart4.0 指南- 模板语法二 顶

要更新name属性,可以通过路径$event.target.value来检索已更改文本。 如果事件属于指令(回想组件是指令),则$event具有指令所有能力。...自定义事件 指令通常使用StreamController来引发自定义事件。 该指令创建一个StreamController并将其stream作为属性公开。...Angular所有基本HTML表单元素提供值访问器,Forms指南展示了如何绑定到它们。...“结构指令”指南介绍了结构指令深入细节,您将在其中学习以下内容: 为什么必须在指令名称前加上前缀星号(*)。 当指令没有合适宿主元素如何元素进行分组。 如何编写自己结构指令。...当表达式为false时,NgIf从DOM中删除HeroDetailComponent,销毁该组件及其所有组件。 在Dart模式下,Dart期望布尔值(类型为bool)为true或false。

29.9K20

Angular学习笔记(一)

其中最重要属性是: declarations - 声明本模块中拥有的视图类。Angular 有三种视图类:组件、指令和管道。...只有根模块才能设置 bootstrap 属性。 组件 组件负责控制视图,通过一些由属性和方法组成 API 与视图交互。 模板 模板以 HTML 形式存在,告诉 Angular 如何渲染组件。...@Component 里面的元数据会告诉 Angular 从哪里获取你为组件指定主要构建块。...这个目标可能是(元素 | 组件 | 指令)property、(元素 | 组件 | 指令)事件,或(极少数情况下) attribute 名。...ngOnInit() 在 Angular 第一次显示数据绑定和设置指令/组件输入属性之后,初始化指令/组件。 在第一轮 ngOnChanges() 完成之后调用,只调用一次。

3.2K20
领券