如何在angular 2+；

我想调用组件中的HTML元素

在angular.js 1中，我可以在控制器中执行以下操作：

var element = $window.document.getElementById(id);
element.scrollIntoView({ behavior: "smooth", block: "start" });

---

如何在angular 2+中执行相同的操作？

首先在元素中添加一个模板引用变量（myElem）：

---

您可以拦截NavigationEnd事件

    private scrollToSectionHook() {
    this.router.events.subscribe(event => {
        if (event instanceof NavigationEnd) {
            const tree = this.router.parseUrl(this.router.url);
            if (tree.fragment) {
                const element = document.querySelector('#' + tree.fragment);
                if (element) {
                    setTimeout(() => {
                        element.scrollIntoView({behavior: 'smooth', block: 'start', inline: 'nearest'});
                    }, 500 );
                }
            }
         }
    });
}

---

您可以在Angular 2+中实现相同的动画滚动到元素，只需在单击时传递元素，如下所示：

<button mat-fab (click)="scroll(target)">
    <i class="material-icons">
      arrow_drop_down
    </i>
 </button>
<div #target></div>

public scroll(element: any) {
    element.scrollIntoView({ behavior: 'smooth' });
  }

向下箭头
公共卷轴（元素：任意）{
元素。scrollIntoView（{behavior:'smooth'}）；
}

我们的混合动力车出现了一些问题，但这些都不起作用。如果你只是想要一个简单的解决方案，你也可以选择添加一个超时来打破这个问题

例如

---

我用电容器包装一个有角度的应用程序。scrollIntoView不工作，但将其包装到一个setTimeout（）函数中，使其成为一个同步调用。我不知道为什么。我在尝试在构造函数中打开模态/对话框时遇到了类似的问题

这一点在不久前已经得到了回答，但实现这一点最干净的方法是按照同样提供可重用性的指令执行

下面是一个指令示例，该指令将通过鼠标单击将元素滚动到视图中：

import {Directive, ElementRef, HostListener} from '@angular/core';

@Directive({
    selector: '[ScrollIntoViewOnClick]'
})
export class ScrollIntoViewOnClickDirective {

    constructor(private _elementRef: ElementRef) {
    }

    @HostListener('click', ['$event.target'])
    scrollIntoView() {
        setTimeout(() => {
            this._elementRef.nativeElement.scrollIntoView({behavior: 'smooth'});
        }, 200)
    }
}

然后，您所要做的就是在相关元素上添加该指令，以便在单击该元素时触发该功能

---

希望它对任何人都有帮助。

我只能用

requestAnimationFrame

或

setTimeout

@ViewChild('someElement') someElementRef: ElementRef;

...

requestAnimationFrame(() => {
  this.someElementRef.nativeElement.scrollIntoView({ behavior: 'smooth' });
});

测试

使用scrollIntoView有3种简单方法

第一条路

在app.component.html文件中：

<button (click)="scrollPoint1(point_1)">
  Click to scroll - Point 1
</button>

<div>
  <h3 #point_1>Point 1</h3>
</div>

<button click)="scrollPoint2()">
  Click to scroll - Point 2
</button>

<div>
  <h3 id="point_2">Point 2</h3>
</div>

<button (click)="scrollPoint3()">
  Click to scroll - Point 3
</button>

<div>
  <h3 #point_3>Point 3</h3>
</div>

第二种方式

在app.component.html文件中：

<button (click)="scrollPoint1(point_1)">
  Click to scroll - Point 1
</button>

<div>
  <h3 #point_1>Point 1</h3>
</div>

<button click)="scrollPoint2()">
  Click to scroll - Point 2
</button>

<div>
  <h3 id="point_2">Point 2</h3>
</div>

<button (click)="scrollPoint3()">
  Click to scroll - Point 3
</button>

<div>
  <h3 #point_3>Point 3</h3>
</div>

第三条道路

在app.component.html文件中：

<button (click)="scrollPoint1(point_1)">
  Click to scroll - Point 1
</button>

<div>
  <h3 #point_1>Point 1</h3>
</div>

<button click)="scrollPoint2()">
  Click to scroll - Point 2
</button>

<div>
  <h3 id="point_2">Point 2</h3>
</div>

<button (click)="scrollPoint3()">
  Click to scroll - Point 3
</button>

<div>
  <h3 #point_3>Point 3</h3>
</div>

---

关于nativeElement的具体建议（或反建议）是什么？每次出现这个问题时，都是“不要使用nativeElement”，没有讨论“推荐方式”。当前的官方建议是使用Render2包装nativeElement私有el:ElementRef，私有渲染器：Renderer2——this.el.nativeElement.style.color='blue'//不建议使用此.render2.setStyle（this.el.nativeElement，'color'，'blue'）//推荐但我看不到renderer2支持

scrollIntoView

@Drenai如何定义推荐方式？它是简单的dom操作。Angular确实提供了Renderer2，但不支持滚动等某些操作。同样，您也在使用document.queryselector执行相同的操作，那么建议您如何执行此操作。。nativeElement正在选择相同的东西这太棒了！这应该是公认的答案。即插即用，只需插入路由器并导入navigationEvent！哇，谢谢。这是一个非常好的答案！为元素设置超时。scrollIntoView确实有帮助！您的解决方案没有像我这样工作，已分配

element=document.querySelector（“#target”）；元素。scrollIntoView（{behavior:'smooth'，block:'start'}）@ViewChild('point_3') private my_point_3: ElementRef;
scrollPoint3() {
  // this.my_point_3.nativeElement.scrollIntoView({behavior: "smooth"});
  this.my_point_3.nativeElement.scrollIntoView();
}