Угловой 6 - Несколько функций в одной директиве.Функция onResize () onInit () - PullRequest
Новая
       33

Угловой 6 - Несколько функций в одной директиве.Функция onResize () onInit ()

0 голосов
/ 25 октября 2018

Я пытаюсь изменить некоторые из своих элементов, когда размер окна изменяется или когда он устанавливается на какое-то разрешение, когда я обновляю страницу.Итак ... 

export class ResizeDirective {

constructor(
    public renderer: Renderer2, public el: ElementRef,
) {
}

const element = document.getElementsByClassName('myElement'); // Can I have something like that? I get some error

@HostListener('window:resize') onResize() {
    if (window.innerWidth < 920)
       this.renderer.addClass(this.el.nativeElement, 'resized');
       this.renderer.addClass(element, 'alsoResized');
} else {
       this.renderer.removeClass(this.el.nativeElement, 'resized');
       this.renderer.removeClass(element, 'alsoResized');
}


onInit() {
    if (window.innerWidth < 920)
       this.renderer.addClass(this.el.nativeElement, 'resized');
       this.renderer.addClass(element, 'alsoResized');
    } else {
       this.renderer.removeClass(this.el.nativeElement, 'resized');
       this.renderer.removeClass(element, 'alsoResized');
    }
}

}

Как связать его с html?

Если у меня есть только одна функция, выполняющая sth, я просто 

<div class="myClass" appResize></div>

Как справиться сдва?Я пробовал: 

<div class="myClass" [appResize]="onResize" [appResize]="onInit"></div>

Моя идея 

export class ResizeDirective implements OnInit {

constructor(
    public renderer: Renderer2, public el: ElementRef,
) {

}

public element = document.getElementsByClassName('myElement');

ngOnInit() {
    this.addColor();
}

@HostListener('window:resize')
onResize(){
    this.addColor();
}

public addColor() {

if (window.innerWidth < 920)
   this.renderer.addClass(this.el.nativeElement, 'resized');
   this.renderer.addClass(element, 'alsoResized');
      } else {
   this.renderer.removeClass(this.el.nativeElement, 'resized');
   this.renderer.removeClass(element, 'alsoResized');
    }


 }

Таким образом, я пишу одну функцию и просто вызываю ее, когда мне нужно - при загрузкеи когда экран изменен!В html мне просто нужно добавить полное имя директивы, например: <div class="myClass" appResize></div> Довольно просто!

...