host属性 @Component({ selector: 'jhi-project', templateUrl: './project.html', styleUrls: [], host: { '(window:keydown)': 'keyboardInput($event)' }    //绑定事件和方法 }) export class JhiProjectComponent { keyboardInput(event) { if (event.keyCode == 65 && e…

@HostBinding()和@HostListener()在自定义指令时非常有用.@HostBinding()可以为指令的宿主元素添加类.样式.属性等,而@HostListener()可以监听宿主元素上的事件. @HostBinding()和@HostListener()不仅仅用在自定义指令,只是在自定义指令中用的较多 本文基于Angular2+ 下面我们通过实现一个在输入时实时改变字体和边框颜色的指令,学习@HostBinding()和@HostListener()的用法. import {…

原文 https://www.jianshu.com/p/20c2d60802f7 大纲 1.宿主元素(Host Element) 2.HostListener 3.HostListenerDecorator 装饰器应用 4.HostBinding 5.HostBinding 装饰器应用 宿主元素(Host Element) 在介绍 HostListener 和 HostBinding 属性装饰器之前,我们先来了解一下 host element (宿主元素). 宿主元素的概念同时适用于指令和组件…

emmm,,,最近在为项目的第二阶段铺路,偶然看到directive,想想看因为项目已经高度集成了第三方组件,所以对于自定义指令方面的经验自己实在知之甚少,后面经过阅读相关资料,总结一篇关于在自定义指令中使用@HostBingDing() 和@HostListenner(). 在使用这两个属性之前,必须明白一件事,就是在angular中有三种directive: 如图所示,component与其他两个directive的一个很明显的区别就是component有template 宿主(host)…

我们通过一个NgModule来启动一个ng app,NgModule通过bootstrap配置来指定应用的入口组件. @NgModule({ bootstrap: [ AppComponent ], .... } 在 declarations 可以配置sub_component declarations: [ FriendsComponent, ChatsComponent ] 如下构造一个TestComponent: import { Component, OnInit, Input, OnC…

Angular动画基于W3C的Web Animations标准.不在Angular Core中了. 组件里面定义一个或多个触发器trigger,每个触发器有一系列的状态和过渡效果来实现. 动画其实就是从一个状态过渡到另一个状态.状态本身包含形状,颜色,大小等. 核心是State和Transition. State就是定义每一帧状态 Transition是定义一帧到下一帧如何过渡. transition中定义animation,Animate规定了具体怎样过渡,比如时间,过渡的速度等.Animat…

昨天一个话题说关于AngularJS2以后版本的两个小技巧,不料引出了另外一个话题,话题起始很简单: "很多的前端框架并不复杂,比如JQuery,引入即用,实时看到效果,多好.到了Angular2一直到现在的版本5,一点改进没有,还要编译,还要部署,原有的JS脚本也不能用了." 细想起来,这个话题的帽子并不小,至少牵扯出来一个关键,AngularJS2及以后的版本,其框架之下的JS代码,跟HTML中<script>块之中的JS代码,到底是什么关系? 我试着来回答一下: 首先…

import {AfterViewInit, Directive, ElementRef, HostBinding, HostListener, Inject, Input, Renderer2} from '@angular/core'; import {DOCUMENT} from '@angular/common'; @Directive({ selector: '[fixWindow]' }) export class FixWindowDirective implements Afte…

目录  一.         前言 1.1.       规范目的 1.2.       局限性 二.         文件规范 2.1.       文件结构约定 2.2.       单一职责原则 2.2.1         单一规则 2.2.2         小函数 三.         命名规范 3.1.       总体命名原则 3.2.       使用点和横杠来分隔文件名 3.3.       符号名与文件名 3.4.       服务名 3.5.       引导程序 3.6.…

前言:最近项目要实现一个拖拽功能,我在网上开始了各类搜寻,虽然后面因为数据原因舍弃了拖拽的这一需求,但是为了不辜负最近的研究,还是来记录一下. 场景需求:面试预约选时间节点,候选人之间是可以相互交换的,但是局限于面试方向相同的候选人才能相互拖拽(拖拽后即表示两个候选人之间交换面试时间).本来此种场景上图更为明确,奈何公司只限于内网开发,上传不了图片,嘤嘤嘤... 参考文章:https://www.cnblogs.com/starof/p/10662027.html 正文: draggable是H…