与 DOM 解耦并将功能引入指令

Question

我正在尝试制定 Snap-to-Component 指令。在这一点上，我已经使用应用程序组件中的逻辑进行了概念验证（可能会被 Renderer2 HostListeners 和 HostBindings 替换），看起来我必须获取 dom 属性（child1L、child1R ......等.) 的孩子可能正在使用 Renderer2。我的问题是你如何将我到目前为止所做的事情分解为一个指令或一组父子指令？或者至少你会从这里往哪个方向走？我是使用 Renderer2、HostListeners 和 HostBinding 的新手，所以我想知道一个更有经验的人会如何做到这一点。谢谢你。这是我的current stackblitz.

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>

感谢您的见解！

Answer 1

您可能想要创建一个attribute directive。

您可以使用 Angular CLI 和以下命令轻松创建 directive（您可以提供路径作为名称 core/directives/my-directive-name）：

ng generate directive <name-of-directive>

然后可以在构造函数中添加以下内容来获取对元素的引用。

el: ElementRef

最后使用HostListener 或任何技术绑定到滚动事件。您可以调用 snap to element 代码（必须更改为仅检查自身），然后元素将检查自身是否需要启动滚动。如果它满足条件，那么它就满足了。

要获得更多奖励积分，您可以添加用于设置的输入以及何时捕捉到元素，例如，带有指令的模板将如下所示：

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

然后在指令本身中，您将拥有：

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

然后你可以使用这个变量作为你的视图边界。

希望这会有所帮助，或者至少能让您走上正轨！