Отделение от DOM и внесение функциональности в директиву - PullRequest
Новая
       9

Отделение от DOM и внесение функциональности в директиву

0 голосов
/ 05 июля 2018

Я пытаюсь составить директиву о привязке к компоненту. На данный момент я сделал подтверждение концепции с логикой, которая живет в компоненте приложения (который, возможно, будет заменен на Renderer2 HostListeners и HostBindings), и похоже, что мне нужно получить свойства dom (child1L, child1R ... и т. Д.). .) детей, вероятно, использующих Renderer2. Мой вопрос: как бы вы развязали то, что я сделал до сих пор, в директиву или группу родительских и дочерних директив? Или, по крайней мере, в каком направлении вы бы пошли отсюда? Я новичок в использовании Renderer2, HostListeners и HostBinding, поэтому мне было интересно, как это сделает более опытный человек. Спасибо. Вот мой текущий стекаблитц.

app.component.ts: 

import { Component,ElementRef,ViewChild } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {

switchDirection = "first";
head: ElementRef;

@ViewChild('child01') child01;
@ViewChild('child02') child02;
@ViewChild('child03') child03;

  onScroll(event: Event) {
    let viewBoundaryL = (event.target as HTMLElement).scrollLeft;
    console.log("viewBoundaryL:" + viewBoundaryL);

//SNAP FROM FIRST TO SECOND CHILD
    if(viewBoundaryL >= 50 && this.switchDirection === "first"){
this.child02.el.nativeElement.scrollIntoView({ behavior: 'smooth', block: "center"  });
setTimeout(() => {
     this.switchDirection = "second";
      //  console.log(this.switchDirection)
    }, 300);
    }

//SNAP FROM SECOND TO FIRST CHILD
    if(viewBoundaryL <= 310 && this.switchDirection === "second"){
this.child01.el.nativeElement.scrollIntoView({ behavior: 'smooth', block: "center"  });
setTimeout(() => {
  this.switchDirection = "first";
  // console.log(this.switchDirection)
    }, 300);
    }

//SNAP FROM SECOND TO THIRD CHILD
        if(viewBoundaryL >= 370 && this.switchDirection === "second"){
this.child03.el.nativeElement.scrollIntoView({ behavior: 'smooth', block: "center"  });
setTimeout(() => {
  this.switchDirection = "third";
  // console.log(this.switchDirection)
    }, 300);
  }

//SNAP FROM THIRD TO SECOND CHILD
        if(viewBoundaryL <= 615 && this.switchDirection === "third"){
this.child02.el.nativeElement.scrollIntoView({ behavior: 'smooth', block: "center"  });
setTimeout(() => {
  this.switchDirection = "second";
  // console.log(this.switchDirection)
    }, 300);
        }     
  }
}

app.component.html: 

 <div class="container"  (scroll)="onScroll($event)" >

<child1 #child01></child1>
<child2 #child02></child2>
<child3 #child03></child3>

</div>

Спасибо за ваши идеи!

1 Ответ

0 голосов
/ 06 июля 2018

Возможно, вы захотите создать директиву атрибута .

Вы можете легко создать директиву , используя Angular CLI со следующей командой (вы можете указать путь как имя core / directives / my-directive-name ): 

ng generate directive <name-of-directive>

Затем в конструкторе вы можете добавить следующее, чтобы получить ссылку на элемент. 

el: ElementRef

Наконец, используя HostListener или любую технику для привязки к событию прокрутки. Вы можете сделать вызов вашей привязки к коду элемента (придется изменить, чтобы просто проверить себя), затем элемент проверит, нужно ли самому инициировать прокрутку. И если оно соответствует условию, тогда оно отвечает.

Для получения дополнительных бонусных баллов вы можете добавить входные данные для настройки, а когда, например, привязаться к элементу, ваш шаблон с директивой будет выглядеть так: 

<div [myDirective] [scrollAt]="300"></div>

И тогда в самой директиве вы бы получили: 

@Input() scrollAt: number = 300 // sets a default incase it isn't provided;

Затем вы можете использовать эту переменную для границы вашего представления.

Надеюсь, это поможет или, по крайней мере, поставит вас на правильный путь!

...