当前位置:网站首页>Using directive in angualr2 to realize that the picture size changes with the window size
Using directive in angualr2 to realize that the picture size changes with the window size
2022-07-05 10:09:00 【cppphp】
Front end programming , It is often required that pictures maintain aspect ratio , The picture zooms automatically as the window zooms , stay angular2 We can use instructions Directive To achieve this function .
First, in the existing angular2 Enter the directory to use this function in the project , Then input... At the terminal :
ng generate directive item-resize
Two files will be generated in the current directory item-resize.directive.ts and item-resize.directive.spec.ts,item-resize.directive.spec.ts It is a unit test file, which we will not discuss in this article .
Open it with an editor item-resize.directive.ts, I use it VS Code, The others are OK , Enter the following code :
import { Directive, ElementRef, HostListener, Renderer, Input, HostBinding } from '@angular/core';
@Directive({
selector: '[appItemResize]'
})
export class ItemResizeDirective {
private el: HTMLElement;
constructor(el: ElementRef, public renderer: Renderer) {
this.el = el.nativeElement;
}
@HostBinding('style.height.px')
elHeight: number;
@HostListener('window:resize', ['$event.target'])
onResize() {
this.resizeWorks();
}
// tslint:disable-next-line:use-life-cycle-interface
ngAfterViewInit() {
this.resizeWorks();
}
private resizeWorks(): void {
const elImage = this.el.getElementsByTagName('img');
const img = new Image();
const that = this;
img.src = elImage[0].src;
img.onload = function(e) {
that.elHeight = +that.el.clientWidth * img.height / img.width;
};
}
}
Save after confirmation . Then open... In your current directory html file , My is introduction.component.html, Enter the following in the relevant location :
…
<div id='technology' appItemResize>
<img src="../../../../assets/images/N4Si3Patten.jpg" width="98%" style="z-index:-100;position:absolute;left:10;top:200">
</div>
…
among appItemResize Are we in item-resize.directive Defined in instruction . For different pictures, you can use instructions in multiple places in the document .
src It's a picture file , The content can be adjusted according to their respective directory structure and image files .
style The image style in should also be adjusted according to their own needs .
Of course, the instructions we define should be added to the corresponding module file , Such as goods.module.ts, The sample code is as follows :
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ItemResizeDirective } from './product/introduction/item-resize.directive';
@NgModule({
declarations: [
…
ItemResizeDirective,
],
imports: [
CommonModule
],
providers: [
],
exports: [
CommonModule,
]
})
export class GoodsModule { }
边栏推荐
- idea用debug调试出现com.intellij.rt.debugger.agent.CaptureAgent,导致无法进行调试
- On July 2, I invite you to TD Hero online press conference
- Apache DolphinScheduler 系统架构设计
- 基于单片机步进电机控制器设计(正转反转指示灯挡位)
- Evolution of Baidu intelligent applet patrol scheduling scheme
- 如何獲取GC(垃圾回收器)的STW(暫停)時間?
- ArcGIS Pro 创建要素
- Charm of code language
- [tips] get the x-axis and y-axis values of cdfplot function in MATLAB
- Mobile heterogeneous computing technology GPU OpenCL programming (Advanced)
猜你喜欢
ArcGIS Pro creating features
Unity粒子特效系列-毒液喷射预制体做好了,unitypackage包直接用 -下
Kotlin compose and native nesting
Solve the problem of no all pattern found during Navicat activation and registration
Oracle combines multiple rows of data into one row of data
Is it really reliable for AI to make complex decisions for enterprises? Participate in the live broadcast, Dr. Stanford to share his choice | qubit · viewpoint
7 月 2 日邀你来TD Hero 线上发布会
Getting started with Apache dolphin scheduler (one article is enough)
Node-RED系列(二九):使用slider与chart节点来实现双折线时间序列图
【系统设计】指标监控和告警系统
随机推荐
Oracle combines multiple rows of data into one row of data
Common fault analysis and Countermeasures of using MySQL in go language
Theme. AppCompat. Light. Darkactionbar not found
RMS to EAP is simply implemented through mqtt
ArcGIS Pro 创建要素
Roll up, break through 35 year old anxiety, and animate the CPU to record the function call process
Analysis on the wallet system architecture of Baidu trading platform
Matrix processing practice
[NTIRE 2022]Residual Local Feature Network for Efficient Super-Resolution
硬核,你见过机器人玩“密室逃脱”吗?(附代码)
Comparison of batch merge between Oracle and MySQL
Apache dolphin scheduler system architecture design
Roll up, break 35 - year - old Anxiety, animation Demonstration CPU recording Function call Process
View Slide
观测云与 TDengine 达成深度合作,优化企业上云体验
The comparison of every() and some() in JS uses a power storage plan
Hard core, have you ever seen robots play "escape from the secret room"? (code attached)
Application of data modeling based on wide table
Node-RED系列(二九):使用slider与chart节点来实现双折线时间序列图
How Windows bat script automatically executes sqlcipher command