当前位置:网站首页>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 { }
边栏推荐
- On July 2, I invite you to TD Hero online press conference
- Understand the window query function of tdengine in one article
- Pagoda panel MySQL cannot be started
- Fluent development: setting method of left and right alignment of child controls in row
- 让AI替企业做复杂决策真的靠谱吗?参与直播,斯坦福博士来分享他的选择|量子位·视点...
- Single chip microcomputer principle and Interface Technology (esp8266/esp32) machine human draft
- How to choose the right chain management software?
- 【系统设计】指标监控和告警系统
- 一文读懂TDengine的窗口查询功能
- How do enterprises choose the appropriate three-level distribution system?
猜你喜欢
一文读懂TDengine的窗口查询功能
B站大量虚拟主播被集体强制退款:收入蒸发,还倒欠B站;乔布斯被追授美国总统自由勋章;Grafana 9 发布|极客头条...
Apache DolphinScheduler 入门(一篇就够了)
La voie de l'évolution du système intelligent d'inspection et d'ordonnancement des petites procédures de Baidu
Analysis on the wallet system architecture of Baidu trading platform
Uncover the practice of Baidu intelligent testing in the field of automatic test execution
[NTIRE 2022]Residual Local Feature Network for Efficient Super-Resolution
Small program startup performance optimization practice
RMS to EAP is simply implemented through mqtt
The comparison of every() and some() in JS uses a power storage plan
随机推荐
Tdengine already supports the industrial Intel edge insight package
Kotlin compose multiple item scrolling
剪掉ImageNet 20%数据量,模型性能不下降!Meta斯坦福等提出新方法,用知识蒸馏给数据集瘦身...
How do enterprises choose the appropriate three-level distribution system?
Theme. AppCompat. Light. Darkactionbar not found
Understand the window query function of tdengine in one article
Cerebral Cortex:有向脑连接识别帕金森病中广泛存在的功能网络异常
Unity particle special effects series - the poison spray preform is ready, and the unitypackage package is directly used - on
移动端异构运算技术-GPU OpenCL编程(进阶篇)
The most comprehensive promotion strategy: online and offline promotion methods of E-commerce mall
Coordinate system of view
Tianlong Babu TLBB series - about items dropped from packages
cent7安装Oracle数据库报错
【C语言】动态内存开辟的使用『malloc』
Charm of code language
Idea debugs com intellij. rt.debugger. agent. Captureagent, which makes debugging impossible
如何获取GC(垃圾回收器)的STW(暂停)时间?
On July 2, I invite you to TD Hero online press conference
Online chain offline integrated chain store e-commerce solution
B站大量虚拟主播被集体强制退款:收入蒸发,还倒欠B站;乔布斯被追授美国总统自由勋章;Grafana 9 发布|极客头条...