Using directive in angualr2 to realize that the picture size changes with the window size

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 { }