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. J2SE总结(一)-------容器

    最近大家都在讨论容器以及如何在项目中去实际的应用它,由于之前对容器没有什么概念,所以把J2SE里面讲的容器的一些基础知识看了一下,总结一下最基本的东西. 围绕整章最核心的就属下面这张图了吧. 一.概念 ...

  2. Angular中checkbox实现复选

    需求:实现点击子选项,父选项自动勾选,当子选项没有勾选,对应的父选项不勾选,并把勾选的对应的id发送出去. 效果图: <!DOCTYPE html> <html data-ng-ap ...

  3. 树形结构JSON的实现方法

    在Web应用程序开发领域,基于Ajax技术的JavaScript树形控件已经被广泛使用,它用来在Html页面上展现具有层次结构的数据项.目前市场上常见的JavaScript框架及组件库中均包含自己的树 ...

  4. Hibernate 中 get()和load()的区别

    一.1.程序检索数据库中不存在的OID:     load方式检索不到的话会抛出org.hibernate.ObjectNotFoundException异常     get方法检索不到的话会返回nu ...

  5. python bisect模块二分法查找

    #!/usr/bin/env python # encoding: utf-8 import bisect import sys #将一个元素插入到一个有序列表的合适位置 #使用这个模块的函数前先确保 ...

  6. 使用bottle进行web开发(2):http request

    我们知道,http request有多个方法,比如get,post,delete,patch,put等.对用的,bottle都定义了相应的装饰器,目前定义了五个: get(),post(),put() ...

  7. Python与数据库[1] -> 数据库接口/DB-API[1] -> MySQL 适配器

    MySQL适配器 / MySQL Adapter MySQL是一种关系型数据库,下面主要介绍利用如何利用Python的MySQL适配器来对MySQL进行操作,其余内容可参考文末相关阅读. 1 MySQ ...

  8. 树链剖分【p4315】月下"毛景树"

    Description 毛毛虫经过及时的变形,最终逃过的一劫,离开了菜妈的菜园. 毛毛虫经过千山万水,历尽千辛万苦,最后来到了小小的绍兴一中的校园里. 爬啊爬~爬啊爬毛毛虫爬到了一颗小小的" ...

  9. Xamarin XAML语言教程使用Progress属性数据绑定设置进度条进度

    Xamarin XAML语言教程使用Progress属性数据绑定设置进度条进度 开发者除了可以为ProgressBar定义的Progress属性直接赋双精度类型的值外,还可以通过数据绑定的方式为该属性 ...

  10. 基础博弈论之——简单的博弈问题【hdu1525】【Euclid‘s Game】

    [pixiv] https://www.pixiv.net/member_illust.php?mode=medium&illust_id=60481118 由于今天考了一道博弈的问题,我竟什 ...