Question

我有菜单，我有4个项目，比如1,2,3,4。

我想在点击第1项和第2项时将用户重定向到同一页面但是用户应该看到页面的不同部分（向下滚动到页面），此页面也是应用程序的登录页面，因此当用户登录时在那时他/她应该是页面的顶部，那时他们不应该滚动到1或2的特定部分。

当用户点击第1项时，用户应向下滚动到某个部分，如果点击3，他/她应该重定向到另一个页面（我可以管理）。

我正在使用角度材料wioth angular5。

你能帮我解决这个问题。

Answer 1

您可以为此创建一个指令，如下所示：

@Directive({
  selector: '[appScroll]'
})
export class ScrollDirective {

  @Input() target;

  constructor() { }

  @HostListener('click') onClick() {
    this.target.scrollIntoView();
  }

}

可以这样使用：

<h1 appScroll [target]="head">Hello {{name}}!</h1>
<h2 #head>Test<h2>

这会将一个元素作为输入（在上面的示例中，我们传递h2），并侦听click事件（在本例中为h1）。如果单击它，它会将输入元素滚动到视图中。

这是一个StackBlitz示例。如果单击“Hello”标题，则应将“test”标题滚动到视图中。

https://angular-r9outm.stackblitz.io/

Angular5滚动到特定元素

1 个答案: