Angular属性型指令

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

属性型指令 — 改变元素、组件或其它指令的外观和行为的指令

属性性指令的创建步骤如下:

import语句需要从 Angular 的core库导入的一些符号。

  1. Directive提供@Directive装饰器功能。

  2. ElementRef注入到指令构造函数中。这样代码就可以访问 DOM 元素了。

  3. Input将数据从绑定表达式传达到指令中,数据绑定。

  4. HostListener绑定事件到指令中。

@Directive装饰器指定一个 CSS 属性选择器[property],以便从模板中识别出关联到这个指令的 HTML。

import { Directive, ElementRef, Input,HostListener } from '@angular/core';
@Directive({ selector: '[myHighlight]' })export class HighlightDirective {constructor(el: ElementRef) {}@HostListener('mouseenter') onMouseEnter() {this.el.nativeElement.style.backgroundColor = 'yellow';}
}

Angular 会为每个匹配的元素创建一个指令控制器类的实例,并把 Angular 的ElementRefRenderer注入进构造函数。 ElementRef是一个服务,它赋予我们通过它的nativeElement属性直接访问 DOM 元素的能力。Renderer服务允许通过代码设置元素的样式。

 

使用属性型指令

在根模块中import,declarations指令类,然后在需要的模版元素中添加指令名

<p myHighlight>Highlight me!</p>

 

为指令绑定响应事件

从@angular/core中引入@HostListener到指令中。HTML DOM 事件 去掉on前缀

@HostListener('事件') 函数名() {//表达式
}

和addEventListener()差不多,此时在绑定了该属性的元素上触发相应的事件后,就会执行@HostListener中的函数。

 

用@Input向指令传递值

可以用一般的各种组件之间的数据传递方法。下面是简单的父组件向子组件传递

  • 父组件中设置数据,模版元素绑定用于传递数据的变量名
  • 在指令类中  @Input(‘别名’) 变量名: 值类型

 

 

转载于:https://my.oschina.net/u/3412211/blog/895121

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/456511.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

beeline连接hiveserver2报错:User: root is not allowed to impersonate root

最近在生产中搭建HA机制的集群&#xff0c;碰到不少坑&#xff0c;会在接下来的时间里好好总结下&#xff0c;先说下遇到的一个大坑。我们的需求是&#xff1a;希望通过hive的thrift服务来实现跨语言访问Hive数据仓库。但是第一步&#xff0c;你得需要在节点中打通服务器端&…

局域网 两台电脑共享 密码关闭

转载于:https://www.cnblogs.com/WhiteHorseIsNotHorse/p/6832463.html

MySQL查询select语句详解

1.查询记录 select*from 表名 [where 条件];eg:select*from students;//查询 students 表中所有记录&#xff0c;所有字段的值都显示出来select field1,field2,...fieldn... from 表名 [where 条件];eg:select id,name,age from students;//查询 students 表中所有记录, 只显示…

SVN使用规范

转载于:https://www.cnblogs.com/shenxiaolin/p/6296880.html

配置hiveserver2访问hive

目录&#xff1a;1、前言2、beeline相关的Server.Thrift配置3、启动beeline并访问Hive4、期间遇到的问题和解决方法 目录&#xff1a; 1、前言 作为数据仓库的工具&#xff0c;hive提供了两种ETL运行方式&#xff0c;分别是通过Hive 命令行和beeline客户端&#xff1b; 命令…

通过rhel7的kvm虚拟机实现3节点Postgres-XL(包括gtm standby)

关于postgres-xl的实验是在我自己笔记本rhel7.2_x64的环境下&#xff0c;用kvm实现的&#xff0c;总共有6台虚拟机&#xff1a; 一台openfiler2.99发布共享存储&#xff0c;一台gtm master&#xff0c;一台gtm slave&#xff0c;三台gtm_proxy/coordinator/datanode&#xf…

MySQL查询select实例 【笔记】

use mydb; select * from EMP; select * from DEPT; select DISTINCT JOB from EMP; -- distinct 去除重复项 select MGR from EMP; select MGR as 主管编号 from EMP; -- 辅助查询&#xff0c;每列信息 起别名 as select EMPNO as 员工编号,JOB as 职位,DEPNO as 部…

C#1

转载于:https://www.cnblogs.com/qingwengang/p/6327371.html

使用python3连接hiveserver2的方法

前言&#xff1a;1、启动HiveServer22、在Linux中安装impyla&#xff08;前提是安装Python相关的环境、虚拟环境&#xff08;可选&#xff09;&#xff09; 前言&#xff1a; 需求&#xff1a;需要通过windows端的pycharm来操作hive。 于是就搜集资料寻找解决方案。 大概有…

vue2.X的路由

以 / 开头的嵌套路径会被当作根路径。 <router-link> 在vue-router1.X中是以<a v-link""></a>存在的 里面的参数&#xff1a; to&#xff1a;代表跳转的目的地&#xff0c;渲染成<a href""> 后面目的地有下面几种表示法 to引导&a…

mysql启动和关闭外键约束的方法(FOREIGN_KEY_CHECKS)

在MySQL中删除一张表或一条数据的时候&#xff0c;出现 [Err] 1451 -Cannot delete or update a parent row: a foreign key constraint fails (...) 这是因为MySQL中设置了foreign key关联&#xff0c;造成无法更新或删除数据。可以通过设置FOREIGN_KEY_CHECKS变量来避免这种…

CentOS下安装VirtualEnv的教程

文章目录前言&#xff1a;1、下载安装virutalenv2、安装新的Python版本&#xff08;可以直接安装anaconda&#xff1a;安装过程可自行查资料&#xff09;3、 VirtualEnv的设置4、Python虚拟环境的作用总结&#xff1a;前言&#xff1a; 在目前的Linux系统中&#xff0c;默认使…

社保(五险一金)的问题

2019独角兽企业重金招聘Python工程师标准>>> 社保&#xff0c;全称为社会保险&#xff0c;是一种再分配制度&#xff0c;它的目标是保证物质及劳动力的再生产和社会的稳定。我们平时常说的社保&#xff0c;还有另一个名称&#xff0c;及“五险一金”。那么社保是哪五…

PKM(个人知识管理)类软件收集(偶尔更新列表)

evernote(印象笔记) Wiz 有道云 麦库 leanote GoogleKeep OneNote SimpleNote(wp家的&#xff0c;免费) pocket(稍后读的软件&#xff0c;同类的还有Instapaper&#xff0c;国内的收趣) MyBase RaysNote(v友开发) CintaNotes https://jitaku.io 开源 Gitit-Bigger Laverna pape…

MySQL中外键的定义、作用、添加和删除

1 简介 在实际开发的项目中&#xff0c;一个健壮数据库中的数据一定有很好的参照完整性。例如学生档案和成绩单两张表&#xff0c;如果成绩单中有张三的成绩&#xff0c;学生档案中张三的档案却被删除了&#xff0c;这样就会产生垃圾数据或者错误数据。为了保证数据的完整性&a…

Hive报错:Error: FUNCTION 'NUCLEUS_ASCII' already exists. (state=X0Y68,code=30000)

Hive执行schematool -initSchema -dbType derby报错。 报错的日志&#xff1a; doupeihuadoupeihua-2104 ~/software/hive/bin $ schematool -initSchema -dbType derbySLF4J: Class path contains multiple SLF4J bindings. SLF4J: Found binding in [jar:file:/home/doupei…

Andorid Scrolling Activity(CoordinatorLayout详情)

1.new project -> Scrolling Activity 2.Layout xml code activity_scrolling.xml 1 <?xml version"1.0" encoding"utf-8"?>2 <android.support.design.widget.CoordinatorLayout xmlns:android"http://schemas.android.com/apk/res/an…

截取utf8中文字符串

英文直接截取即可。 中文应字节长度会乱码&#xff0c;应先转unicode截取。 如下&#xff1a; #-*- coding:utf8 -*- s u截取中文 s.decode(utf8)[0:3].encode(utf8)转载于:https://www.cnblogs.com/BigFishFly/p/6337183.html

解决:Navicat for mysql 设置外键出错

1 看下是不是外键允许为空&#xff0c;不唯一等约束条件不满足 2 或者外键设置删除时为 restrict 1. 两个字段的类型或者大小不严格匹配。例如&#xff0c;如果一个是int(10)&#xff0c;那么外键也必须设置成int(10)&#xff0c;而不是int(11)&#xff0c;也不能是tinyint。另…

Python加盐加密方法hashlib(md5,sha224,sha1,sha256)

用random.randint随机数给密码加,盐加强密码的安全性