angular ViewChild ContentChild 系列的查询参数
官方说明
官方文档
在调用 NgAfterViewInit 回调函数之前就会设置这些视图查询。
元数据属性:
- selector - 用于查询的指令类型或名字。
- read - 从查询到的元素中读取另一个令牌。
所支持的选择器包括:
- 任何带有 @Component 或 @Directive 装饰器的类
- 字符串形式的模板引用变量(比如可以使用 @ViewChild('cmp') 来查询 <my-component #cmp>
- 组件树中任何当前组件的子组件所定义的提供商(比如 @ViewChild(SomeService) someService: SomeService )
- 任何通过字符串令牌定义的提供商(比如 @ViewChild('someToken') someTokenVal: any )
- TemplateRef(比如可以用 @ViewChild(TemplateRef) template; 来查询 )
代码:
<div #testBox [appElementTitle]="'属性指令测试'" [appCopyAttr]="'https://liangyuetian.cn/'">
appElementTitle 属性指令测试 appCopyAttr 属性指令测试
</div>
<div #box [appElementTitle]="'这是box的title'" [appCopyAttr]="'https://baidu.com.cn/'">
appElementTitle 属性指令测试 appCopyAttr 属性指令测试
</div>
export class AppComponent implements OnInit, AfterViewInit {
@ViewChild('testBox', {read: ElementRef}) elBox: ElementRef;
@ViewChild('testBox', {read: CopyAttrDirective}) copy: CopyAttrDirective;
@ViewChild('testBox', {read: ElementTitleDirective}) titles: ElementTitleDirective;
@ViewChild('box', {read: ElementRef}) elBox2: ElementRef;
@ViewChild('box', {read: CopyAttrDirective}) copy2: CopyAttrDirective;
@ViewChild('box', {read: ElementTitleDirective}) titles2: ElementTitleDirective;
keyUpSearch($event: { [key: string]: any }) {
console.log($event.code, $event.key, $event);
}
ngOnInit() {
}
ngAfterViewInit() {
console.log('one', this.elBox, this.copy, this.titles);
console.log('tow', this.elBox2, this.copy2, this.titles2);
}
}
效果:
angular ViewChild ContentChild 系列的查询参数的更多相关文章
- solr与.net系列课程(四)solr查询参数的讲解与.net如何获取solr数据
solr与.net系列课程(四)solr查询参数的讲解与.net如何获取solr数据 上一节我们完成了solr连接数据库,细心的朋友会发现一个问题,就是solr其实和语言没有任何关系,配置完成后任何语 ...
- SSRS 系列 - 使用带参数的 MDX 查询实现一个分组聚合功能的报表
SSRS 系列 - 使用带参数的 MDX 查询实现一个分组聚合功能的报表 SSRS 系列 - 使用带参数的 MDX 查询实现一个分组聚合功能的报表 2013-10-09 23:09 by BI Wor ...
- 微软BI 之SSRS 系列 - 基于时间段参数的 MDX 查询以及时间日历 Date Picker 的时间类型参数化
今天在天善问答里看到一个问题,如果我没有理解错的话,它应该是指比如在一个报表中选取一个时间段,然后求出这个时间段的某个 Measure 的 SUM 和.并且同时求出这两个时间点对应的上一年的时间点之间 ...
- DAX/PowerBI系列 - 查询参数用法详解(Query Parameter)
PowerBI - 查询参数用法详解(Query Parameter) 很多人都不知道查询参数用来干啥,下面总结一下日常项目中常用的几个查询参数的地方.(本人不太欢hardcode的东西) 使用查询 ...
- angular5 @viewChild @ContentChild ElementRef renderer2
@viewChild 作用一:选择组件内节点 <!--视图 --> <div #mydiv><input></div> // 选择 @ViewChild ...
- Django模型层之字段查询参数及聚合函数
该系列教程系个人原创,并完整发布在个人官网刘江的博客和教程 所有转载本文者,需在顶部显著位置注明原作者及www.liujiangblog.com官网地址. 字段查询是指如何指定SQL WHERE子句的 ...
- PowerBI开发 第八篇:查询参数
在PowerBI Desktop中,用户可以定义一个或多个查询参数(Query Parameter),参数的功能是为了实现PowerBI的参数化编程,使得Data Source的属性.替换值和过滤数据 ...
- 如何从angular2中的url获取查询参数?
问题描述 我使用angular2.0.0-beta.7.当组件在像”/path?query=value1″这样的路径上加载时,它被重定向到”/path”.为什么删除了GET参数?如何保留参数? 路由器 ...
- angular6 监听url查询参数变化刷新页面
快照snapshot取到的参数是组件第一次渲染时候的参数,当我们在页面中需要根据不同的url查询参数显示不同的内容时,快照就不能满足我们的需要了,这时候就要用ActivatedRoute服务的quer ...
随机推荐
- Spark RDD 操作
1. Spark RDD 创建操作 1.1 数据集合 parallelize 可以创建一个能够并行操作的RDD.其函数定义如下: ) scala> sc.defaultParallelism ...
- 通过JS 给这个input加一个事件 获得焦点,回车事件绑定
通过JS 给这个input加一个事件 就是获得焦点就行了 window.onload = function(){ var oInput = document.getElementById(" ...
- Python课程第二天作业
一.统计字符串格式 要求: # 1.统计元组中所有数据属于字符串的个数,提示: isinstance() # 数据: t1 = (1, 2, '3', '4', 5, '6') # 结果: 3 代码 ...
- Centos7 系统下怎么更改apache默认网站目录
当我们在Centos7中配置好Apache时,发现apache默认解析目录是在 /var/www/html,也就是说当访问服务器 IP 或者本地 localhost 时,默认定位到这个目录里的 ind ...
- scrapy-middlewares
1.scrapy中间件 下载中间件Downloader Middlewares 下载器中间件处理请求与响应,对应两个方法 process_request(self, request, spider) ...
- #include 相关问题
#include <> 和 #include “”的区别是#include <>先从系统默认的搜索路径开始搜索,#include “”是从当前目录开始搜索,如果未搜索到,都会继 ...
- HDU - 3567
https://cn.vjudge.net/problem/HDU-3567 #include <stdio.h>#include <math.h>#include <q ...
- django 创建视图和APP
.创建视图views 1.在项目目录下创建views.py文件 2.from django.http import HttpResponse 3.在urls 导入模板: from django.con ...
- Javascript 京东轮播图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- JS常见兼容性问题
兼容性问题:函数(方法)兼容 描述:部分W3C指定的函数,有部分老的浏览器不支持 解决: 条件判断,如果有,则使用,添加原型方法,例如 String 的 trim 方法 if(!String.prot ...