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的更多相关文章

  1. Angular自定义指令(directive)

    angular自定义指令,意我们可以通过angula自己定义指令,来实现我们的特殊要求,为所欲为,一支穿云箭,千军万马来相见 多少年的老规矩了,先看代码: <!DOCTYPE html> ...

  2. angular的GitHub Repository Directive Example学习

    angular的GitHub Repository Directive Example学习 <!DOCTYPE html> <html ng-app="myApp" ...

  3. angular自定义指令-directive

    Directive究竟是个怎么样的一个东西呢?我个人的理解是这样的:将一段html.js封装在一起,形成一个可复用的独立个体,具体特定的功能.下面我们来详细解读一下Directive的一般性用法. v ...

  4. [Angular] Custom directive Form validator

    Create a directive to check no special characters allowed: import {Directive, forwardRef} from '@ang ...

  5. Angular之 Scope和 Directive

    ---------------------------Scope-------------------------------- https://docs.angularjs.org/guide/sc ...

  6. [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 ...

  7. Angular 学习笔记 (Custom Accessor + Mat FormField + Custom select)

    custom form control 之前就写过了,这里简单写一下. 创建一个组件实现 ControlValueAccessor 接口 @Component({ providers: [ { pro ...

  8. -_-#【Angular】自定义指令directive

    AngularJS学习笔记 <!DOCTYPE html> <html ng-app="Demo"> <head> <meta chars ...

  9. angular ViewChild ContentChild 系列的查询参数

    官方说明 官方文档 在调用 NgAfterViewInit 回调函数之前就会设置这些视图查询. 元数据属性: selector - 用于查询的指令类型或名字. read - 从查询到的元素中读取另一个 ...

随机推荐

  1. 《R语言实战》读书笔记 第七章--基本统计分析

    在导入数据并且将数据进行组织和初步可视化以后,需要对数据进行分布探索和两两关系分析等.主要内容有描述性统计分析.频数表和列联表.相关系数和协方差.t检验.非参数统计. 7.1描述性统计分析 7.1.1 ...

  2. nginx配置C compiler cc is not found

    1.需求 linux安装个编译器 参考资料:http://blog.csdn.net/testcs_dn/article/details/51461750

  3. MFC 在窗口上画指定大小的ICON

    CPaintDC dc(this); HICON hIcon = (HICON)::LoadImage(AfxGetInstanceHandle(),MAKEINTRESOURCE(IDI_ICON) ...

  4. spring的applicationContext.xml如何自动加载

    一个web工程自动加载的配置文件只有web.xml,想要加载其他.xml必须在web.xml里面进行配置. 用spring的时候需要一个bean容器来管理所有的bean,所有bean默认是写在appl ...

  5. 百度之星初赛(A)——T5

    今夕何夕 Problem Description 今天是2017年8月6日,农历闰六月十五. 小度独自凭栏,望着一轮圆月,发出了“今夕何夕,见此良人”的寂寞感慨. 为了排遣郁结,它决定思考一个数学问题 ...

  6. 结构型设计模式之桥接模式(Bridge)

    结构 意图 将抽象部分与它的实现部分分离,使它们都可以独立地变化. 适用性 你不希望在抽象和它的实现部分之间有一个固定的绑定关系.例如这种情况可能是因为,在程序运行时刻实现部分应可以被选择或者切换. ...

  7. Codeforces Round #395 Div.2 题解

    感受 第一次参加CF的rating比赛,感觉还是非常exciting,前18分钟把AB切掉之后一直在考虑C题,结果最后还是没有想出来Orz 传送门 A 比较水的模拟,就是计算:\(\frac{z}{l ...

  8. TemplateBinding和Binding

    TemplateBinding是Binding的一个轻量级版本,它失去了成熟版本Binding的很多功能,比如继承内容引用(inheritence context referencing),Relat ...

  9. 转:python安装pycrypto

    from: http://ljhzzyx.blog.163.com/blog/static/3838031220136592824697/   在windows下用一下开源工具就是悲催,如题pytho ...

  10. Scala学习随笔——深入类和对象

    函数化对象(又称方程化对象)指的是所定义的类或对象不包含任何可以修改的状态. 本篇随笔就是着重记录函数化对象.定义了一个有理数类定义的几个不同版本,以介绍 Scala 类定义的几个特性:类参数和构造函 ...