[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 - 从查询到的元素中读取另一个 ...
随机推荐
- J2SE总结(一)-------容器
最近大家都在讨论容器以及如何在项目中去实际的应用它,由于之前对容器没有什么概念,所以把J2SE里面讲的容器的一些基础知识看了一下,总结一下最基本的东西. 围绕整章最核心的就属下面这张图了吧. 一.概念 ...
- Angular中checkbox实现复选
需求:实现点击子选项,父选项自动勾选,当子选项没有勾选,对应的父选项不勾选,并把勾选的对应的id发送出去. 效果图: <!DOCTYPE html> <html data-ng-ap ...
- 树形结构JSON的实现方法
在Web应用程序开发领域,基于Ajax技术的JavaScript树形控件已经被广泛使用,它用来在Html页面上展现具有层次结构的数据项.目前市场上常见的JavaScript框架及组件库中均包含自己的树 ...
- Hibernate 中 get()和load()的区别
一.1.程序检索数据库中不存在的OID: load方式检索不到的话会抛出org.hibernate.ObjectNotFoundException异常 get方法检索不到的话会返回nu ...
- python bisect模块二分法查找
#!/usr/bin/env python # encoding: utf-8 import bisect import sys #将一个元素插入到一个有序列表的合适位置 #使用这个模块的函数前先确保 ...
- 使用bottle进行web开发(2):http request
我们知道,http request有多个方法,比如get,post,delete,patch,put等.对用的,bottle都定义了相应的装饰器,目前定义了五个: get(),post(),put() ...
- Python与数据库[1] -> 数据库接口/DB-API[1] -> MySQL 适配器
MySQL适配器 / MySQL Adapter MySQL是一种关系型数据库,下面主要介绍利用如何利用Python的MySQL适配器来对MySQL进行操作,其余内容可参考文末相关阅读. 1 MySQ ...
- 树链剖分【p4315】月下"毛景树"
Description 毛毛虫经过及时的变形,最终逃过的一劫,离开了菜妈的菜园. 毛毛虫经过千山万水,历尽千辛万苦,最后来到了小小的绍兴一中的校园里. 爬啊爬~爬啊爬毛毛虫爬到了一颗小小的" ...
- Xamarin XAML语言教程使用Progress属性数据绑定设置进度条进度
Xamarin XAML语言教程使用Progress属性数据绑定设置进度条进度 开发者除了可以为ProgressBar定义的Progress属性直接赋双精度类型的值外,还可以通过数据绑定的方式为该属性 ...
- 基础博弈论之——简单的博弈问题【hdu1525】【Euclid‘s Game】
[pixiv] https://www.pixiv.net/member_illust.php?mode=medium&illust_id=60481118 由于今天考了一道博弈的问题,我竟什 ...