[Angular] @ViewChild read custom directive and exportAs
For example we have a component:
<Card ></Card>
And a driective:
<Card highlighted></Card>
We want to get the driective instant inside the component code, we can use @ViewChild:
@ViewChild(CardComponennt, {read: HighlightedDirective}) highlighted: HighlightedDirective
Then we can access the instant in ngAfterViewInited lifecycle hook.
-----
Another way to access driective is inside component template. we need to use 'exportAs' from the directive:
@Directive({
name: 'highlighted',
exportAs: 'hl'
}) ... toggle () {...}
Inside the template, we can get it from the template reference:
<Card highlighted #hlref="hl"></Card> <button (click)="hlref.toggle()"></button>
[Angular] @ViewChild read custom directive and exportAs的更多相关文章
- Angular自定义指令(directive)
angular自定义指令,意我们可以通过angula自己定义指令,来实现我们的特殊要求,为所欲为,一支穿云箭,千军万马来相见 多少年的老规矩了,先看代码: <!DOCTYPE html> ...
- angular的GitHub Repository Directive Example学习
angular的GitHub Repository Directive Example学习 <!DOCTYPE html> <html ng-app="myApp" ...
- angular自定义指令-directive
Directive究竟是个怎么样的一个东西呢?我个人的理解是这样的:将一段html.js封装在一起,形成一个可复用的独立个体,具体特定的功能.下面我们来详细解读一下Directive的一般性用法. v ...
- [Angular] Custom directive Form validator
Create a directive to check no special characters allowed: import {Directive, forwardRef} from '@ang ...
- Angular之 Scope和 Directive
---------------------------Scope-------------------------------- https://docs.angularjs.org/guide/sc ...
- [Angular] Create a custom validator for reactive forms in Angular
Also check: directive for form validation User input validation is a core part of creating proper HT ...
- Angular 学习笔记 (Custom Accessor + Mat FormField + Custom select)
custom form control 之前就写过了,这里简单写一下. 创建一个组件实现 ControlValueAccessor 接口 @Component({ providers: [ { pro ...
- -_-#【Angular】自定义指令directive
AngularJS学习笔记 <!DOCTYPE html> <html ng-app="Demo"> <head> <meta chars ...
- angular ViewChild ContentChild 系列的查询参数
官方说明 官方文档 在调用 NgAfterViewInit 回调函数之前就会设置这些视图查询. 元数据属性: selector - 用于查询的指令类型或名字. read - 从查询到的元素中读取另一个 ...
随机推荐
- 用hibernate.properties代替hibernate.cfg.xml配置常用的属性
我们使用hibernate时经常在hibernate.cfg.xml文件中配置数据库连接的相关属性,是否显示sql语句,数据库的方言等,这些配置其实也可以在.properties文件中配置.现在我把这 ...
- SHH框架的搭建
建立一个Web项目,然后导入如下包 l struts2包:在struts2-blank.war下的lib目录下,以及struts-2.3.15.1\lib下的struts和spring整合的插件包s ...
- webpack最佳入门实践系列(6)
10.css模块化 10.1.什么是css模块? CSS模块就是所有的类名都只有局部作用域的CSS文件,当你在一个JavaScript模块中导入一个CSS文件时,CSS模块将会定义一个对象,将文件中类 ...
- 洛谷P3166 [CQOI2014]数三角形
题目描述 给定一个nxm的网格,请计算三点都在格点上的三角形共有多少个.下图为4x4的网格上的一个三角形.注意三角形的三点不能共线. 输入输出格式 输入格式: 输入一行,包含两个空格分隔的正整数m和n ...
- 栅栏涂漆(color)
栅栏涂漆测评 题目描述 zed 最近总是受到 Farmer 的困扰,因此他在自家的门前插了一排栅栏以防农气的入侵.栅栏由 N 个竖条栅栏横向组成,每个竖条栅栏宽度为 1.过了一段时间,zed 觉得栅栏 ...
- DNS 资源记录解释
;SOA授权的开始;;SOA或授权的开始记录用来表示区域的启动;每个区域必须只有一个SOA记录;从名字服务器,在不能和主服务器通信的情况下,将提供12小时DNS服务, 在指定的时间后停止为那个区域提供 ...
- Linux内核实践之tasklet机制【转】
转自:http://blog.csdn.net/bullbat/article/details/7423321 版权声明:本文为博主原创文章,未经博主允许不得转载. 作者:bullbat 源代码分析与 ...
- 5.OpenStack添加镜像服务
添加镜像服务 这里是安装在控制器上 创建数据库 mysql -uroot -ptoyo123 CREATE DATABASE glance; GRANT ALL PRIVILEGES ON glanc ...
- python--jinja2
from jinja2 import Template # 创建一个Template模板去渲染它 s = "my name is {{mashiro}}" t = Template ...
- hdu 5067(暴力搜索)
Harry And Dig Machine Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Ot ...