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. 用hibernate.properties代替hibernate.cfg.xml配置常用的属性

    我们使用hibernate时经常在hibernate.cfg.xml文件中配置数据库连接的相关属性,是否显示sql语句,数据库的方言等,这些配置其实也可以在.properties文件中配置.现在我把这 ...

  2. SHH框架的搭建

    建立一个Web项目,然后导入如下包 l  struts2包:在struts2-blank.war下的lib目录下,以及struts-2.3.15.1\lib下的struts和spring整合的插件包s ...

  3. webpack最佳入门实践系列(6)

    10.css模块化 10.1.什么是css模块? CSS模块就是所有的类名都只有局部作用域的CSS文件,当你在一个JavaScript模块中导入一个CSS文件时,CSS模块将会定义一个对象,将文件中类 ...

  4. 洛谷P3166 [CQOI2014]数三角形

    题目描述 给定一个nxm的网格,请计算三点都在格点上的三角形共有多少个.下图为4x4的网格上的一个三角形.注意三角形的三点不能共线. 输入输出格式 输入格式: 输入一行,包含两个空格分隔的正整数m和n ...

  5. 栅栏涂漆(color)

    栅栏涂漆测评 题目描述 zed 最近总是受到 Farmer 的困扰,因此他在自家的门前插了一排栅栏以防农气的入侵.栅栏由 N 个竖条栅栏横向组成,每个竖条栅栏宽度为 1.过了一段时间,zed 觉得栅栏 ...

  6. DNS 资源记录解释

    ;SOA授权的开始;;SOA或授权的开始记录用来表示区域的启动;每个区域必须只有一个SOA记录;从名字服务器,在不能和主服务器通信的情况下,将提供12小时DNS服务, 在指定的时间后停止为那个区域提供 ...

  7. Linux内核实践之tasklet机制【转】

    转自:http://blog.csdn.net/bullbat/article/details/7423321 版权声明:本文为博主原创文章,未经博主允许不得转载. 作者:bullbat 源代码分析与 ...

  8. 5.OpenStack添加镜像服务

    添加镜像服务 这里是安装在控制器上 创建数据库 mysql -uroot -ptoyo123 CREATE DATABASE glance; GRANT ALL PRIVILEGES ON glanc ...

  9. python--jinja2

    from jinja2 import Template # 创建一个Template模板去渲染它 s = "my name is {{mashiro}}" t = Template ...

  10. hdu 5067(暴力搜索)

    Harry And Dig Machine Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Ot ...